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,
            }],

数据格式为： [ [ “高通”， 17 ]， [ “公羊” 12 ]， [ “歌剧”， 8 ]， [ “ Ob。”， 8 ]， [ “苏” 8 ]， ]

输出显示在图片中，我希望每个小节都使用不同的颜色，您可以帮我吗？

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://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

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

2 个答案: