javascript 如何使用APEXCHARTS将颜色渐变应用于折线图

ma8fv8wu  于 2023-01-01  发布在  Java
关注(0)|答案(1)|浏览(182)

如何实现这种色彩渐变折线图

Y轴极限范围是60以内的蓝色色彩线、60~80以内的黄色线和80~100以内的红色线
我遵循此官方文档https://codepen.io/apexcharts/pen/RvqdPb
代码:

var options = {
    chart: {
      height: 380,
      type: "line",
      foreColor: '#6D6D6D'
    },
    series: [
      {
        name: "Series 1",
        data: [2, 30, 60, 100, 20]
      }
    ],
    fill: {
      type: "gradient",
      gradient: {
        shadeIntensity: 1,
        opacityFrom: 0.7,
        opacityTo: 0.9,
        colorStops: [
          {
            offset: 60,
            color: "blue",
            opacity: 1
          }
          {
            offset: 80,
            color: "yellow",
            opacity: 1
          },
          {
            offset: 100,
            color: "red",
            opacity: 1
          }
        ]
      }
    },
    grid: {
       borderColor: '#6D6D6D'
    },
    xaxis: {
      categories: [
        "01 Jan",
        "02 Jan",
        "03 Jan",
        "04 Jan",
        "05 Jan"
      ]
    }
  };
  
  var chart = new ApexCharts(document.querySelector("#chart"), options);
  
  chart.render();

这有什么不正确的?我收到了这个结果。

pftdvrlh

pftdvrlh1#

默认情况下,渐变是水平的,如果你想用垂直渐变,你必须这样设置fill.gradient.type

fill: {
  gradient: {
    type: 'vertical'
  }
}

然后你必须处理fill.gradient.colorStops,知道这些止损点并不对应于实际值How create chart of temperature with gradient? · Issue #2125 · apexcharts/apexcharts.js · GitHub
看来你现在能做的最好的事情是这样的:
x一个一个一个一个x一个一个二个x

相关问题