我有一个高图表和图形文件看起来像下面的图像.高空图表是一个sparkline chart.如何将透明度和线性渐变效果添加到图表中?

enter image description here

推荐答案

迷你图使用了area多种图表,可以通过series.fillColor选项添加area系列的梯度,如下所示:

Example code:

  series: [{
    data: [1, 2, 3, 4, 5],
    fillColor: {
      linearGradient: {
        x1: 0,
        y1: 0,
        x2: 0,
        y2: 1
      },
      stops: [
        [0, Highcharts.getOptions().colors[0]],
        [1, Highcharts.color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
      ]
    }
  }]

一百零二 https://jsfiddle.net/BlackLabel/ak1yrL0w/. https://jsfiddle.net/BlackLabel/sr0xnw1d/.

API Reference:. https://api.highcharts.com/highcharts/series.area.fillColor.

Css相关问答推荐

如何允许在bslb中 Select 输入重叠卡片?

如何使用css::Part()定位Web组件shadowDOM中的第N个元素

try 在Jekyll中使用多个SCSS文件时出错

Nuxt 3+sass:不能将包含路径与@IMPORT和@USE一起使用

Z Index 复杂性 - 如何将组件放置在 div 内部以相对于其级别外部的组件具有更高的 z-index 值?

如何使用 Tailwind CSS 稳定 React 中的浮动标签?

背景上带有文本的按钮的反转 colored颜色

Tailwind css 和 Next.js 导航组件 z-index 不工作

semantic-ui-react 使输入使用全宽度可用

如果父项的不透明度小于 1,则背景过滤器不适用

tailwind 类的别名?

Bootstrap 类似乎没有任何作用

如何仅包装左侧内容

Icomoon:如何避免重复索引(具有相同内容 ID 的不同图标)?

纯 CSS/JS 的 SVG 连续向内方形螺旋动画

弹性盒项目之间的间距

纯 CSS 复选框图像替换

填充剩余的垂直空间 - 仅 CSS

如何使 window.scrollTo() 效果平滑

CSS3可以转换字体大小吗?