How to open new chart to the adjacent <div> on bar click in highchart

问题

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)

回答1:

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]
        }]
    });
}

And markup:

<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>

回答2:

I think so you do not need to have 2 different charts if the charts are related to each other ... what you need is some thing like this ... just click on any one bar and see the magic

来源：https://stackoverflow.com/questions/23868187/how-to-open-new-chart-to-the-adjacent-div-on-bar-click-in-highchart