Apexcharts 在条形图中和单击时更改条形的颜色答案

【问题标题】：Apexcharts change color of bars in bar chart and when clickedApexcharts 在条形图中和单击时更改条形的颜色
【发布时间】：2020-07-21 14:28:00
【问题描述】：

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

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/，但这只会改变阴影，但我喜欢改变颜色，但似乎没有找到任何资源去做。如果您之前经历过以下情况并成功改变它，我将不胜感激。

【问题讨论】：

你找到解决办法了吗？
不，我没有找到任何解决方案

标签： javascript charts apexcharts

【解决方案1】：

你可以试试这个配置：

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();

希望对你有帮助！

【讨论】：

【解决方案2】：

下面是不同颜色选择的笔。它显示单色并在延迟后变为多色，只是为了展示可用选项。选择你喜欢的。

https://codepen.io/raevilman/full/dyXNgNo

以上链接中使用的图表选项。

var options = {
  chart: {
    type: "bar"
  },
  series: [
    {
      data: [10, 40, 20, 44, 22, 12]
    }
  ],
  xaxis: {
    categories: [1, 2, 3, 4, 5, 6]
  },
  colors: ["#00FF00"]
};

PS：我无法更改条形图的选择颜色。

【讨论】：