如何打开新的图表到相邻的< div>在栏上单击highchart [英] How to open new chart to the adjacent <div> on bar click in highchart

问题描述

我是Highcharts的新手，需要两个图表(假设图表a和图表B).因此，创建一个很简单.在图表的条形图上单击(图A)，我想在现有的<div>(图A)附近打开一个新的图表(图B).因此，一旦单击条形图，两个图表都应该可见.对于第一个图表(图表A)单击的每个条，新图表(图表B)应该不同

I'm new to Highcharts and need two charts(lets assume Chart a and chart B). So creating one is simple. On bar click of chart(Chart A) I want a new chart(Chart B) to open adjacent to the existing <div>(Chart A). So both chart should be visible once bar is clicked. New chart (chart B) should be different for each bar clicked of first Chart (Chart A)

推荐答案

您只需在栏上绑定click事件，然后在特定的div中创建第二个图表，请参见:

You can simply bind click event on a bar, then create second chart in a specific div, see: http://jsfiddle.net/Yrygy/147/

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'bar'
    },
    plotOptions: {
        bar: {
            point: {
                events: {
                    click: renderSecond
                }
            }
        }
    },
    series: [{
        data: [{
            y: 100,
            name: 'test'
        }, {
            y: 34,
            name: 'click'
        }, {
            y: 67,
            name: 'other'
        }]
    }]
});

function renderSecond(e) {
    var point = this;
    $("#detail").highcharts({
        title: {
            text: point.name + ':' + point.y
        },
        series: [{
            data: [1, 2, 3]
        }]
    });
}

和标记:

<div id="container" style="min-width: 400px; height: 300px; margin: 0 auto"></div>
<div id="detail" style="min-width: 400px; height: 300px; margin: 0 auto"></div>

这篇关于如何打开新的图表到相邻的< div>在栏上单击highchart的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！