Highcharts 具有单个分组列自定义颜色的Highstock股票图表

我使用分组列实现了以下股票图表：

var seriesData = [];
Highcharts.setOptions({
    lang: {
        rangeSelectorFrom: "Von",
        rangeSelectorTo: "Bis",
        months: ["Jannuar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"],
        weekdays: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
        shortMonths: ["Jan", "Feb", "Mrz", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"],
        rangeSelectorZoom: '',
        decimalPoint: "."
    }
});

columnChartOptions =  {
    exporting: {
        enabled: false
    },
    navigator: {
        enabled: false
    },
    scrollbar: {
        enabled: false
    },
    chart: {
        type: 'column'
    },
    credits: {
        href: " ",
        text: " "
    },
    title: {
        text: ''
    },
    yAxis: {
        min: 0,
        title: {
            text: 'kWh'
        },
        lineWidth: 1,
        opposite: false
    },
    xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: {
            month: '%B',
            week: '%e. %b',
            day: '%e. %b',
            hour: '%H'
        }
    },
    legend: {
        enabled: false
    },
    tooltip: {
        shared: true,
        valueDecimals: 2
    },
    plotOptions: {
        series: {
            marker: {
                enabled: true
            }
        },
        column: {
            grouping: false,
            shadow: false,
            borderWidth: 0,
            groupPadding: 0,
            color: '#688DC4'
        }

    },
    rangeSelector: {
        inputDateFormat: '%d.%m.%Y',
        inputEditDateFormat: '%d.%m.%Y',
        inputEnabled: true,
        inputDateParser: function (value) {
            value = value.split(/[\.]/);
            return Date.UTC(
                value[2],
                value[1]-1,
                value[0]
            );
        },
        verticalAlign: 'top',
        x: 0,
        y: 0,
        buttonPosition: {
            align: 'left',
            x: 0,
            y: 0
        },
        buttonTheme: {
            width: 50
        },
        allButtonsEnabled: true,
        selected: 3,
        buttonSpacing: 5,
        buttons: [{
            type: 'day',
            count: 1,
            text: 'Tag',
            dataGrouping: {
                approximation: "sum",
                enabled: true,
                forced: true,
                units: [['hour', [1]]]
            }
        }, {
            type: 'week',
            count: 1,
            text: 'Woche',
            dataGrouping: {
                approximation: "sum",
                enabled: true,
                forced: true,
                units: [['day', [1]]]
            }
        }, {
            type: 'month',
            count: 1,
            text: 'Monat',
            dataGrouping: {
                approximation: "sum",
                enabled: true,
                forced: true,
                units: [['week', [1]]]
            }
        }, {
            type: 'year',
            count: 1,
            text: 'Jahr',
            dataGrouping: {
                approximation: "sum",
                enabled: true,
                forced: true,
                units: [['month', [1]]]
            }
        }]
    },
    series: []
};

图表的初始化：

myChart = new Highcharts.StockChart('consumptionGraph', columnChartOptions);




myChart.showLoading("Wird geladen...");
setChartData();

设置seriesdata DynamicCaly（实际上是一个异步AJAX调用，但为了更好地理解，将其替换为静态数组）：

现在我想改变每一列的颜色，其中包含大于等于200的xAxis值。（我的示例的第2+4列）。

---

有什么方法可以做到这一点吗？

是的

update（{color:newColor}）

不适用于分组点，但您可以通过调用其

graphic

属性上的

css

方法直接修改其SVG：

   chart: {
    events: {
      render: function() {
        this.series[0].groupedData.forEach(function(groupedPoint) {
          if (groupedPoint.y > 40) {
            groupedPoint.graphic.css({
              color: 'red'
            });
          }
        });
      }
    }
  },

现场演示：

---

render

事件在图表初始加载后（加载事件之后）和每次重画后（重画事件之后）激发。

此：适用于年视图，不适用于任何其他时段。然而，它是动态的，它不在乎是2个月还是10个月。它可能也可以工作数月/数周/数天。谢谢。这与@ewolden解决方案相结合对我来说很好

   chart: {
    events: {
      render: function() {
        this.series[0].groupedData.forEach(function(groupedPoint) {
          if (groupedPoint.y > 40) {
            groupedPoint.graphic.css({
              color: 'red'
            });
          }
        });
      }
    }
  },