时间戳

首页 > 解决方案 > highcharts 中的连接图表

javascript - highcharts 中的连接图表

问题描述

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

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

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

标签： javascriptchartshighcharts

解决方案

Highcharts 有多种方法，例如chart.updateor 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

推荐阅读