Question

我正在努力动态更新 HighCharts 堆栈条形图及其钻取图表，但是我坚持一个问题，即异步钻取无法更新。

在我的场景系列中，数据是完全动态的，并且相应的向下钻取列。

由于向下钻取系列的color:null还有一个小问题，每个时间序列的颜色都不相同，并且由于它是动态的，所以我无法设置静态颜色，是否有任何方法可以使颜色相同，例如默认的颜色方案简单柱形图

这里是可复制的问题JSFiddle

我使用了以下方法（第二种方法在JSFiddle中进行了注释）

第一种方法使用 chart.update API
第二种方法的使用 chart.options.merge API

// Create the chart
var chart = Highcharts.chart('container', {
    chart: {
        type: 'column',
        events: {
            drilldown: function(e) {
                if (!e.seriesOptions) {

                    var chart = this,
                        drilldowns = {
                            'Animals': {
                                type: 'column',
                                name: 'Animals',
                                data: [2, 3],
                                color: null
                            },
                            'Fruits': {
                                type: 'column',
                                name: 'Fruits',
                                data: [7, 3],
                                color: null
                            }
                        };
                    const series = [];
                    series.push(drilldowns['Animals']);
                    series.push(drilldowns['Fruits']);
                    series.forEach(serie => {
                        chart.addSingleSeriesAsDrilldown(e.point, serie);
                    });
                    chart.applyDrilldown();

                }

            },
            drillup: function() {
                var newOptions = {
                    legend: {
                        enabled: true
                    }
                };
                this.update(newOptions);
            }
        }
    },
    title: {
        text: 'Basic drilldown'
    },
    xAxis: {
        type: 'category'
    },

    legend: {
        enabled: false
    },

    plotOptions: {
        column: {
            stacking: 'normal'
        },
        series: {
            borderWidth: 0,
            dataLabels: {
                enabled: true
            }
        }
    },

    series: [{
        name: 'Things',
        colorByPoint: true,
        data: [{
            name: 'Animals',
            y: 5,
            drilldown: true
        }, {
            name: 'Fruits',
            y: 2,
            drilldown: true
        }, {
            name: 'Cars',
            y: 4,
            drilldown: true
        }]
    }]
});


$('#update').click(function() {
    // First Method 
    chart.update({
        drilldown: {
            series: [{
                name: 'Animals2',
                data: [1, 5],
                color: null,
                type: 'column'
            }, {
                name: 'Fruits2',
                data: [3, 5],
                color: null,
                type: 'column'
            }]
        }
    });

    // Second  Method

    /* chart.options.drilldown = Highcharts.merge(chart.options.drilldown, {
        series: [{
          name: 'Animals2',
          data: [1, 5],
          color: null,
          type: 'column'
        }, {
          name: 'Fruits2',
          data: [3, 5],
          color: null,
          type: 'column'
        }]
      }); */
});

Answer 1

您可以为下钻系列动态设置颜色：

                series.forEach(function(serie, i) {
                    serie.color = chart.options.colors[i];
                    chart.addSingleSeriesAsDrilldown(e.point, serie);
                });

实时演示：https://jsfiddle.net/BlackLabel/mb7dhxc4/

Answer 2

我找到了上述问题的解决方法，即异步钻取图表未更新，我刚刚从 chart.events 中更新了钻取事件，并使用了更新的钻取系列，此处是更新的按钮代码

$('#update').click(function() {

    chart.hcEvents.drilldown[0] = function(e) {
                if (!e.seriesOptions) {

                    var chart = this,
                        drilldowns = {
                            'Animals': {
                                type: 'column',
                                name: 'Animals2',
                                data: [1, 6],
                                color: null
                            },
                            'Fruits': {
                                type: 'column',
                                name: 'Fruits2',
                                data: [7, 4],
                                color: null
                            }
                        };
                    const series = [];
                    series.push(drilldowns['Animals']);
                    series.push(drilldowns['Fruits']);
                    series.forEach(serie => {
                        chart.addSingleSeriesAsDrilldown(e.point, serie);
                    });
                    chart.applyDrilldown();

                }

            };
});

异步向下钻取不更新HighCharts

2 个答案: