Apexchart在条形图上未添加渐变颜色

时间:2020-09-06 17:51:47

标签: javascript apexcharts

我想用渐变色创建条形图,但是当我阅读文档时,没有解释如何在条形图上创建渐变色(仅适用于折线图)

这是我想要实现的,颜色慢慢地改变了每一步: like this

但是,在顶点上,渐变仅在单个条形上起作用 like this

您可以看看这个code

var options = {
  chart: {
    height: 380,
    type: "bar",
    foreColor: '#6D6D6D'
  },
  series: [
    {
      name: "Series 1",
      data: [2, 23, 19, 45, 38, 52, 45]
    }
  ],
  fill: {
    type: "gradient",
    gradient: {
      shadeIntensity: 1,
      opacityFrom: 0.7,
      opacityTo: 0.9,
      colorStops: [
        {
          offset: 0,
          color: "#EB656F",
          opacity: 1
        },
        {
          offset: 20,
          color: "#FAD375",
          opacity: 1
        },
        {
          offset: 60,
          color: "#61DBC3",
          opacity: 1
        },
        {
          offset: 100,
          color: "#95DA74",
          opacity: 1
        }
      ]
    }
  },
  grid: {
     borderColor: '#6D6D6D'
  },
  xaxis: {
    categories: [
      "01 Jan",
      "02 Jan",
      "03 Jan",
      "04 Jan",
      "05 Jan",
      "06 Jan",
      "07 Jan"
    ]
  }
};

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();

谢谢。

0 个答案:

没有答案