如何打开新的图表到相邻的< div>在栏上单击highchart [英] How to open new chart to the adjacent <div> on bar click in highchart
本文介绍了如何打开新的图表到相邻的< div>在栏上单击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屋!
查看全文