Связанные графики в высоких графиках

Question

В моем приложении две диаграммы, разработанные с использованием Highcharts. Мне нужно соединить их вместе. Это означает, что при нажатии на одну диаграмму необходимо обновить и другую диаграмму.

Я сделал то же самое с PowerBI. Теперь мне нужно разработать его с помощью Highcharts. Я приложил скриншот ожидаемого поведения. Это не должно быть точно таким же. Мне нужен способ обновить оставшиеся диаграммы, чтобы показать информацию, связанную с выбранным набором данных на первом графике.

Может кто-нибудь сказать мне способ сделать это с помощью Highcharts? Возможно ли это с Highcharts?

Answer 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