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

Question

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

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

动态设置系列数据（实际上是使用异步 AJAX 调用，但为了更好地理解替换为静态数组）：

function setChartData() {

            var consumerSeries = [
                [Date.UTC(2018, 1, 1), 150], [Date.UTC(2018, 1, 11), 180], [Date.UTC(2018, 1, 12), 199],
                [Date.UTC(2018, 7, 1), 150], [Date.UTC(2018, 7, 2), 130], [Date.UTC(2018, 7, 5), 280],
                [Date.UTC(2018, 9, 1), 150], [Date.UTC(2018, 9, 2), 130], [Date.UTC(2018, 9, 5), 190],
                [Date.UTC(2018, 12, 1), 150], [Date.UTC(2018, 12, 2), 130], [Date.UTC(2018, 12, 5), 250], 
            ];

            consumerSeriesObject = {
                name: "Consumption",
                data: consumerSeries,
                showInNavigator: true,
                color: '#688DC4',
                dataGrouping: {
                    approximation: "sum",
                    enabled: true,
                    forced: true,
                    units: [['month', [1]]]
                }
            };

            myChart.addSeries(consumerSeriesObject, true);
            myChart.hideLoading();

}`

JS Fiddle

现在我想更改 xAxis 值大于等于 200 的每一列的颜色。（我的示例的第 2+4 列）。有什么办法吗？

Answer 1

是。 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'
            });
          }
        });
      }
    }
  },

现场演示： http://jsfiddle.net/BlackLabel/bhtqoyj9/

render 事件在图表初始加载后（加载事件后立即触发）和每次重绘后（重绘事件后立即触发）。

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

Highstock Stockchart with custom color for single grouped column

highcharts

highstock