highcharts 中的连接图表

【问题标题】：Connected charts in highchartshighcharts 中的连接图表
【发布时间】：2019-11-11 17:40:37
【问题描述】：

我的应用程序中有两个使用 Highcharts 开发的图表。我需要将它们连接在一起。这意味着当单击一个图表时，另一个图表也需要更新。

我对 PowerBI 做了同样的事情。现在我需要使用 Highcharts 开发它。我附上了预期行为的屏幕截图。它不需要完全相同。我需要的是一种更新剩余图表的方法，以在第一个图表中显示与所选数据集相关的信息。

有人可以告诉我使用 Highcharts 完成这项工作的方法吗？ Highcharts 可以吗？

【问题讨论】：

【解决方案1】：

Highcharts 有多种方法，例如chart.update 或series.setData，允许动态更新图表：

var chart1 = Highcharts.chart('container', {
    series: [{
        type: 'pie',
        data: [10, 20],
        events: {
            click: function() {
                chart2.update(additionalOptions, true, true);
            }
        }
    }]
});

var chart2 = Highcharts.chart('container1', {
    series: [{
        type: 'column',
        data: [1, 2, 3, 4]
    }]
});

var additionalOptions = {
    chart: {
        type: 'column'
    },
    plotOptions: {
        series: {
            stacking: 'normal'
        }
    },
    series: [{
        data: [1, 2, 3, 4]
    }, {
        data: [1, 2, 3, 4]
    }]
}

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

API 参考：

https://api.highcharts.com/class-reference/Highcharts.Chart#update

https://api.highcharts.com/class-reference/Highcharts.Series#setData

【讨论】：