Как я могу получить каждый бар разного цвета, используя 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,
            }],

Формат данных: [["Qualcom", 17], ["The ram", 12], ["Aoperty", 8],["Ob.", 8], ["Sugh", 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://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