如何打开新图表到相邻的<div>栏上点击高亮显示</div>

时间:2014-05-26 10:34:39

标签: javascript jquery css highcharts

我是Highcharts的新手,需要两张图表(假设图表a和图表B)。所以创建一个很简单。在栏上点击图表(图表A)我希望在现有<div>附近打开一个新图表(图表B)(图表A)。因此,一旦点击栏,两个图表都应该可见。单击第一个图表(图表A)

的每个条形图的新图表(图表B)应该不同

2 个答案:

答案 0 :(得分:0)

我认为如果图表彼此相关,你不需要有2个不同的图表......你需要的是some thing like this ...只需点击任何一个栏并看到魔法

答案 1 :(得分:0)

您只需在条形图上绑定点击事件,然后在特定div中创建第二个图表,请参阅: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>