时间戳

首页 > 解决方案 > Apexcharts 在条形图中和单击时更改条形的颜色

javascript - Apexcharts 在条形图中和单击时更改条形的颜色

问题描述

我很难更改条形图中条形的颜色以适应我网站的主题。我去了 youtube 并观看了以下视频https://www.youtube.com/watch?v=Cw87VN7K1Ek 并尝试了他们的解决方案来改变颜色但没有成功。我想寻求您的帮助，以了解我可能出错的地方或必须对我的代码进行更改才能成功显示新颜色。以下是配置条形图的代码片段：

constructor() {
    this.chartOptions = {
      series: [
        {
          name: "My-series",
          data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
        }
      ],
      chart: {
        height: 350,
        type: "bar"
      },
      title: {
        text: "My First Angular Chart"
      },
      xaxis: {
        categories: ["Jan", "Feb",  "Mar",  "Apr",  "May",  "Jun",  "Jul",  "Aug", "Sep"]
      },
      fill: {
        colors: ['#f00']
      }
    };
  }

以下是结果，图表的颜色仍然是 ApexCharts 的默认颜色

在此处输入图像描述

我还想在选择时更改条形图中特定条形（数据点）的颜色。我浏览了以下链接：https ://apexcharts.com/docs/options/states/ ，但这只会改变阴影，但我喜欢改变颜色，但似乎没有找到任何资源去做。如果您以前经历过以下情况并成功地改变它，我将非常感激。

在此处输入图像描述

标签： javascriptchartsapexcharts

解决方案

你可以试试这个配置：

var options = {
  chart: {
    type: 'bar',
    height: 'auto'
  },
  series: [{
    name: "My-series",
    data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
  }],
  dataLabels: {
        enabled: false
  },
  xaxis: {
    categories: ["Jan", "Feb",  "Mar",  "Apr",  "May",  "Jun",  "Jul",  "Aug", "Sep"]
  },
  colors: [
    function ({ value, seriesIndex, dataPointIndex, w }) {
        if (dataPointIndex == 8) {
          return "#7E36AF";
        } else {
          return "#D9534F";
        }
      }
  ]
}

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

chart.render();

我希望它有帮助！

推荐阅读