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

【问题标题】：How to apply a color gradient to a line chart using APEXCHARTS如何使用 APEXCHARTS 将颜色渐变应用于折线图
【发布时间】：2022-12-30 06:41:37
【问题描述】：

如何在折线图上实现这种颜色渐变 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();

这有什么不对的地方？我收到这个结果。

【问题讨论】：

标签： javascript reactjs charts linechart apexcharts

【解决方案1】：

默认情况下，渐变是水平的。如果你想要垂直渐变，你必须像这样设置fill.gradient.type：

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

然后你必须玩fill.gradient.colorStops，知道这些停止点与实际值不对应: How create chart of temperature with gradient? · Issue #2125 · apexcharts/apexcharts.js · GitHub

看起来你现在能做的最好的事情是这样的：

let options = {
  chart: {
    type: 'line',
    height: 350
  },
  series: [
    {
      name: 'Series',
      data: [5, 30, 60, 100, 60, 30, 5]
    }
  ],
  xaxis: {
    categories: ['01 Jan', '02 Jan', '03 Jan', '04 Jan', '05 Jan', '06 Jan', '07 Jan']
  },
  stroke: {
    curve: 'smooth'
  },
  fill: {
    type: 'gradient',
    gradient: {
      type: 'vertical',
      colorStops: [
        {
          offset: 0,
          color: 'red'
        },
        {
          offset: 25,
          color: 'yellow'
        },
        {
          offset: 50,
          color: 'blue'
        }
      ]
    }
  },
  tooltip: {
    enabled: false
  }
};

let chart = new ApexCharts(document.querySelector('#chart'), options);
chart.render();

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

<div id="chart"></div>

【讨论】：