如何使用Highchart获得不同颜色的每个条形图？

Question

Highchart图形代码如下所示我希望每个条形标签的颜色都不同。目前，我的酒吧颜色相同

 Highcharts.chart('container', {
            chart: {
                type: 'column',
            },
            title: {
                text: 'Popular '
            },
            credits:{
                enabled:false
            },
            xAxis: {
                max: 20,
                type: 'category',
                style:{
                    fontSize: '12px'
                }
            },
            yAxis: {
                min: 0,
                allowDecimals:false,
                title: {
                    text: 'Number of applications',
                    style:{
                       fontSize: '12px'
                    }
                },
                gridLineWidth:0,
                minorGridLineWidth: 0,
                tickLength: 5,
                tickWidth: 1,
                tickPosition: 'inside',
                lineWidth:1
            },
            scrollbar: {
                enabled: true
            },
            legend: {
                enabled: false
            },

            tooltip: {
                pointFormat: 'hi'
            },
            series: [{
                name: Stats',
                data: data,
                color:'#2ecc71',
                pointWidth: 25,
            }],

数据格式为：[[“Qualcomm”，17]，[“The ram”，12]，[“Aoperty”，8]，[“On。”，8]，[“Sugh”，8]，]

输出显示在图片中我希望每个酒吧都有不同的颜色can你帮帮我吗？

Answer 1

参考注释，您可以通过以编程方式将颜色属性添加到其对象来为单个点设置特定颜色，如下所示：

  series: [{
    data: [
      ["Qualcom", 17],
      {
        name: "The ram",
        y: 12,
        color: 'red'
      },
      ["Aoperty", 8],
      ["Ob.", 8],
      ["Sugh", 8]
    ],
    color: '#2ecc71'
  }]

API参考：

• https://api.highcharts.com/highcharts/series.column.data.color

演示：

• https://jsfiddle.net/BlackLabel/craqy1sv/1/

---

如果要在条件匹配时向点添加特定颜色，则可以遍历图表加载事件中的每个系列点并更新匹配点：

  chart: {
    type: 'column',
    events: {
        load: function() {
        var chart = this,
            series = chart.series[0];

        series.points.forEach(function(point) {
          if (point.name === 'The ram') {
            point.update({
                color: 'red'
            })
          }
        });
      }
    }
  }

API参考：

• https://api.highcharts.com/highcharts/chart.events.load
• https://api.highcharts.com/class-reference/Highcharts.Point#update

演示：

• https://jsfiddle.net/BlackLabel/jmuoevz1/

Answer 2

您需要将colorByPoint :true设置为使用不同的颜色

  series: [{
    name: 'Stats',
    data: [
      [
        "Qualcom",
        17
      ],
      [
        "The ram",
        12
      ],
      [
        "Aoperty",
        8
      ],
      [
        "Ob.",
        8
      ],
      [
        "Sugh",
        8
      ]
    ],
    colorByPoint: true,
    pointWidth: 25,
  }]

Fiddle