在HighCharts中链接多个图表控件 [英] Link multiple chart controls in HighCharts

问题描述

在我的网页上，我用可缩放的X轴显示5个不同的折线图。每个图表也有一系列对所有图表都相同的系列。

On my web page i'm displaying 5 different line charts with a zoomable X axis. Each chart also has a number of series that are the same for all the charts.

我正在寻找可以显示/隐藏系列和缩放功能的控件发生在每个图表中，无论我改变哪个图表控件。

Im looking for the the controls where you can show/hide a series and zoom feature to happen within each graph no matter which graphs controls I change.

这是Highcharts支持的吗？

Is this something Highcharts support?

推荐答案

Please familiar with example which synchronizes three charts and have unzoom button.

请熟悉一个同步三个图表的例子， {
var chart1;
var chart2;
var chart3;
var controllingChart;

var defaultTickInterval = 5;
var currentTickInterval = defaultTickInterval ;

$（document）.ready（function（）{
function unzoom（）{
chart1.options.chart.isZoomed = false;
chart2.options .chart.isZoomed = false;
chart3.options.chart.isZoomed = false;

chart1.xAxis [0] .setExtremes（null，null）;
chart2.xAxis [0] .setExtremes（null，null）;
chart3.xAxis [0] .setExtremes（null，null）;
}

//捕捉mousemove事件并让所有3个图表的十字符号沿x轴上的指示值移动

函数syncronizeCrossHairs（图表）{
var container = $（chart.container），
offset = container.offset（），
x，y，isInside，report;

container.mousemove（function（evt）{

x = evt.clientX - chart.plotLeft - offset.left;
y = evt.clientY - chart.plotTop - offset.top;
var xAxis = chart.xAxis [0];
//删除旧的绘图线并为该图绘制新的绘图线（十字线）
var xAxis1 = chart1.xAxis [0];
xAxis1.removePlotLine（myPlotLineId）;
xAxis1.addPlotLine（{
value：chart.xAxis [0] .translate（x，true），
width：1，
color：'red'，
// dashStyle：'dash'，
id：myPlotLineId
}）;
//删除旧的十字准线并在chart2上绘制新的十字线
var xAxis2 = chart2.xAxis [0];
xAxis2.removePlotLine（myPlotLineId）;
xAxis2.addP lotLine（{
value：chart.xAxis [0] .translate（x，true），
width：1，
color：'red'，
// dashStyle：' dash'，
id：myPlotLineId
}）;

var xAxis3 = chart3.xAxis [0];
xAxis3.removePlotLine（myPlotLineId）;
xAxis3.addPlotLine（{
value：chart.xAxis [0] .translate（x，true），
width：1，
color：'red'，
// dashStyle：'dash'，
id：myPlotLineId
}）;

//如果您需要同步其他图表 - 在此函数中以相同的方式更新它们的十字准线（绘图线）。
}）;
}

//根据缩放范围计算合理的时间间隔 -
//必须计算这个值，因为我们按照
// //的顺序设置tickIntervals可预测的3个图表之间的同步与
//不同的数据。
函数computeTickInterval（xMin，xMax）{
var zoomRange = xMax - xMin;

if（zoomRange< = 2）
currentTickInterval = 0.5;
if（zoomRange< 20）
currentTickInterval = 1;
else if（zoomRange< 100）
currentTickInterval = 5;
}

//显式设置3个图表的tickInterval - 基于
//选定范围
函数setTickInterval（event）{
var xMin = event.xAxis [0] .min;
var xMax = event.xAxis [0] .max;
computeTickInterval（xMin，xMax）;

chart1.xAxis [0] .options.tickInterval = currentTickInterval;
chart1.xAxis [0] .isDirty = true;
chart2.xAxis [0] .options.tickInterval = currentTickInterval;
chart2.xAxis [0] .isDirty = true;
chart3.xAxis [0] .options.tickInterval = currentTickInterval;
chart3.xAxis [0] .isDirty = true;
}

//将极值和tickInterval重置为默认值
函数unzoom（）{
chart1.xAxis [0] .options.tickInterval = defaultTickInterval;
chart1.xAxis [0] .isDirty = true;
chart2.xAxis [0] .options.tickInterval = defaultTickInterval;
chart2.xAxis [0] .isDirty = true;
chart3.xAxis [0] .options.tickInterval = defaultTickInterval;
chart3.xAxis [0] .isDirty = true;

chart1.xAxis [0] .setExtremes（null，null）;
chart2.xAxis [0] .setExtremes（null，null）;
chart3.xAxis [0] .setExtremes（null，null）;

$ b $（document）.ready（function（）{


$（'＃btn'）。click（function（）{
unzoom（）;
}）;

var myPlotLineId =myPlotLine;
chart1 = new Highcharts.Chart（{
chart：{
renderTo：'container'，
type：'line'，
zoomType：'x'，
//仅x轴
borderColor：'＃003399'，
//'＃022455'，
borderWidth：1，
isZoomed：false
}，
title：{
text：'Height Versus Weight'
}，
副标题：{
text：'来源：名义测试数据'
}，
xAxis：{
title：{
enabled：true，
text：'Height（cm）'
}，
tickInterval：5，
startOnTick：true，
endOnTick：true，
showLastLabel：true，
events：{

afterSetExtremes：function（）{

if（！this.chart.options.chart.isZoomed）
{
var xMin = this.chart.xAxis [0] .min;
var xMax = this.chart.xAxis [0] .max;

var zmRange = computeTickInterval（xMin，xMax）;
chart1.xAxis [0] .options.tickInterval = zmRange;
chart1.xAxis [0] .isDirty = true;
chart2.xAxis [0] .options.tickInterval = zmRange;
chart2.xAxis [0] .isDirty = true;
chart3.xAxis [0] .options.tickInterval = zmRange;
chart3.xAxis [0] .isDirty = true;

chart2.options.chart.isZoomed = true;
chart3.options.chart.isZoomed = true;
chart2.xAxis [0] .setExtremes（xMin，xMax，true）;

chart3.xAxis [0] .setExtremes（xMin，xMax，true）;
chart2.options.chart.isZoomed = false;
chart3.options.chart.isZoomed = false;
}
}


}
}，
y轴：{
标题：{
text：'重量（kg）'
}
}，
工具提示：{
formatter：function（）{
return''+ this.x +'km，'+ this.y +'km';
}
}，
图例：{
layout：'vertical'，
align：'left'，
verticalAlign：'top'，
x：100，
y：70，
floating：true，
backgroundColor：'#FFFFFF'，
borderWidth：1
}，
plotOptions： {
scatter：{
marker：{
radius：5，
states：{
hover：{
enabled：true，
lineColor ：'rgb（100,100,100）'
}
}
}，
表示：{
盘旋：{
标记：{
启用：false
}
}
}
}
}，
系列：[{
名称：'Group 1'，
color：'rgba（223，83，83，.5）'，
data ：[[146.2,51.6]，[147.5,59.0]，[148.5,49.2]，[151.0,63.0]，[155.8,53.6]，
[157.0,59.0]，[159.1,47.6]，[161.0 ，69.8]，[166.2,66.8]，[168.2,75.2]，
[172.5,55.2]，[174.9,54.2]，[176.9,62.5]，[180.4,42.0]，[190.0,50.0]]

}，
{
name：'dummy_data'，
//将其放入，以便x轴在3个图表之间保持一致，以
开头color：'rgba（119，152 ，191，.5）'，
showInLegend：false，
data：[[145.0，0.0]，[200.0，0.0]]}]

}，函数）{//将此函数添加到图表定义中以获得同步十字线
syncronizeCrossHairs（chart）;
}）;

chart2 = new Highcharts.Chart（{
图表：{
renderTo：'container2'，
类型：'line'，
zoomType：' x'，
//仅x轴
borderColor：'＃003399'，
//'＃022455'，
borderWidth：1，
isZoomed：false
/ * events：{
selection：function（event）{//此函数应根据选定范围缩放chart1，chart2，chart3
controlsChart =chart2;
setTickInterval事件）;
}
} * /
}，
标题：{
text：'身高与体重'
}，
字幕：{
text：'来源：名义测试数据'
}，
xAxis：{
title：{
enabled：true，
text：'Height（cm）'
}，
tickInterval：5，
startOnTick：true，
endOnTick：true，
showLastLabel：true，
events：{
afterSetExtremes：function（）{
if（！this.chart.options.chart.isZoomed）
{
var xMin = this.chart。 x轴[0] .min;
var xMax = this.chart.xAxis [0] .max;
var zmRange = computeTickInterval（xMin，xMax）;
chart1.xAxis [0] .options.tickInterval = zmRange;
chart1.xAxis [0] .isDirty = true;
chart2.xAxis [0] .options.tickInterval = zmRange;
chart2.xAxis [0] .isDirty = true;
chart3.xAxis [0] .options.tickInterval = zmRange;
chart3.xAxis [0] .isDirty = true;


chart1.options.chart.isZoomed = true;
chart3.options.chart.isZoomed = true;
chart1.xAxis [0] .setExtremes（xMin，xMax，true）;

chart3.xAxis [0] .setExtremes（xMin，xMax，true）;
chart1.options.chart.isZoomed = false;
chart3.options.chart.isZoomed = false;





y轴：{
title：{
text：'Weight（kg） '
}
}，
tooltip：{
formatter：function（）{
return''+ this.x +'km，'+ this.y + 'km';
}
}，
图例：{
layout：'vertical'，
align：'left'，
verticalAlign：'top'，
x：100，
y：70，
floating：true，
backgroundColor：'#FFFFFF'，
borderWidth：1
}，
plotOptions： {
scatter：{
marker：{
radius：5，
states：{
hover：{
enabled：true，
lineColor ：'rgb（100,100,100）'
}
}
}，
表示：{
盘旋：{
标记：{
启用：false
}
}
}
}
}，
series：[{
name：'dummy_data'，
color：'rgba（223，83，83，.5）'，
showInLegend： false，
data：[[145.0，0.0]，[200.0，0.0]]}，
{
名称：'Group 2'，
color：'rgba（119， 152,151,195，'
数据：[[151.0,65.6]，[166.3,71.8]，[167.5,80.7]，[168.5,72.6]，[172.2,78.8]，
[174.5,74.8]，[175.0,86.4]，[181.5,78.4]，[182.0,62.0]，[184.0,81.6]，
[185.0,76.6]，[186.8,83.6]，[186.0,90.0 ]，[188.0,74.6]，[190.0,71.0]，
[192.0,79.6]，[193.7,93.8]，[196.5,70.0]，[199.0,72.4]]}]
}，函数（图）{//将此函数添加到图表定义以获得同步十字线
//此函数需要添加到每个同步图表
syncronizeCrossHairs（图表）;

}）;

chart3 = new Highcharts.Chart（{
图：{
renderTo：'container3'，
类型：'line'，
zoomType：' x'，
//仅x轴
borderColor：'＃003399'，
//'＃022455'，
borderWidth：1，
isZoomed：false
/ * events：{
selection：function（event）{//这个函数应该放大chart1，chart2，chart3
controlsChart =chart3;
setTickInterval（event）;
}
} * /
}，
标题：{
text：'身高与体重'
}，
字幕：{
text：'来源：名义测试数据'
}，
xAxis：{
title：{
enabled：true，
text： '高度（cm）'
}，
tickInterval：5，
startOnTick：true，
endOnTick：true，
showLastLabel：true，
events： {
afterSetExtremes：function（）{
if（！this.chart.options.chart.isZoomed）{
var xMin = this.chart.xAxis [0] .min;
var xMax = this.chart.xAxis [0] .max;
var zmRange = computeTickInterval（xMin，xMax）;
chart1.xAxis [0] .options.tickInterval = zmRange;
chart1.xAxis [0] .isDirty = true;
chart2.xAxis [0] .options.tickInterval = zmRange;
chart2.xAxis [0] .isDirty = true;
chart3.xAxis [0] .options.tickInterval = zmRange;
chart3.xAxis [0] .isDirty = true;

chart1.options.chart.isZoomed = true;
chart2.options.chart.isZoomed = true;
chart1.xAxis [0] .setExtremes（xMin，xMax，true）;

chart2.xAxis [0] .setExtremes（xMin，xMax，true）;
chart1.options.chart.isZoomed = false;
chart2.options.chart.isZoomed = false;





y轴：{
title：{
text：'Weight（kg） '
}
}，
tooltip：{
formatter：function（）{
return''+ this.x +'km，'+ this.y + 'km';
}
}，
图例：{
layout：'vertical'，
align：'left'，
verticalAlign：'top'，
x：100，
y：70，
floating：true，
backgroundColor：'#FFFFFF'，
borderWidth：1
}，
plotOptions： {
scatter：{
marker：{
radius：5，
states：{
hover：{
enabled：true，
lineColor ：'rgb（100,100,100）'
}
}
}，
表示：{
盘旋：{
标记：{
启用：false
}
}
}
}
}，
系列：[{
名称：'dummy_data'，
//我把它放在图表中，以使图表在x轴上具有相同的范围
color：'rgba（223，83，83，.5）'，
showInLegend：false，
data：[[145.0，0.0]，[200.0，0.0]]}，
$ b名称：'Group 3'，
color：'rgba（119,152,191，.5）'，
data：[[153.0,65.6]，[156.3， 71.8]，[167.5,80。 7美元，169.5美元，72.6美元，171.2美元，78.8美元，b $ b美元[172.5,74.8美元]，[177.0美元，86.4美元]，[181.5美元，78.4美元]，[183.0美元，62.0美元，[184.0,81.6美元] b $ b [185.0,76.6]，[186.2,83.6]，[187.0,90.0]，[188.7,74.6]，[190.0,71.0]，
[192.0,79.6]，[195.7,93.8]，[ 196.5，70.0]，[199.4,72.4]]}]
}，function（chart）{//将此函数添加到图表定义中以获得同步十字线
//需要将此函数添加到每个同步图表
syncronizeCrossHairs（图表）;

}）;


}）;

}）;

}）;

$(function() { var chart1; var chart2; var chart3; var controllingChart; var defaultTickInterval = 5; var currentTickInterval = defaultTickInterval; $(document).ready(function() { function unzoom() { chart1.options.chart.isZoomed = false; chart2.options.chart.isZoomed = false; chart3.options.chart.isZoomed = false; chart1.xAxis[0].setExtremes(null, null); chart2.xAxis[0].setExtremes(null, null); chart3.xAxis[0].setExtremes(null, null); } //catch mousemove event and have all 3 charts' crosshairs move along indicated values on x axis function syncronizeCrossHairs(chart) { var container = $(chart.container), offset = container.offset(), x, y, isInside, report; container.mousemove(function(evt) { x = evt.clientX - chart.plotLeft - offset.left; y = evt.clientY - chart.plotTop - offset.top; var xAxis = chart.xAxis[0]; //remove old plot line and draw new plot line (crosshair) for this chart var xAxis1 = chart1.xAxis[0]; xAxis1.removePlotLine("myPlotLineId"); xAxis1.addPlotLine({ value: chart.xAxis[0].translate(x, true), width: 1, color: 'red', //dashStyle: 'dash', id: "myPlotLineId" }); //remove old crosshair and draw new crosshair on chart2 var xAxis2 = chart2.xAxis[0]; xAxis2.removePlotLine("myPlotLineId"); xAxis2.addPlotLine({ value: chart.xAxis[0].translate(x, true), width: 1, color: 'red', //dashStyle: 'dash', id: "myPlotLineId" }); var xAxis3 = chart3.xAxis[0]; xAxis3.removePlotLine("myPlotLineId"); xAxis3.addPlotLine({ value: chart.xAxis[0].translate(x, true), width: 1, color: 'red', //dashStyle: 'dash', id: "myPlotLineId" }); //if you have other charts that need to be syncronized - update their crosshair (plot line) in the same way in this function. }); } //compute a reasonable tick interval given the zoom range - //have to compute this since we set the tickIntervals in order //to get predictable synchronization between 3 charts with //different data. function computeTickInterval(xMin, xMax) { var zoomRange = xMax - xMin; if (zoomRange <= 2) currentTickInterval = 0.5; if (zoomRange < 20) currentTickInterval = 1; else if (zoomRange < 100) currentTickInterval = 5; } //explicitly set the tickInterval for the 3 charts - based on //selected range function setTickInterval(event) { var xMin = event.xAxis[0].min; var xMax = event.xAxis[0].max; computeTickInterval(xMin, xMax); chart1.xAxis[0].options.tickInterval = currentTickInterval; chart1.xAxis[0].isDirty = true; chart2.xAxis[0].options.tickInterval = currentTickInterval; chart2.xAxis[0].isDirty = true; chart3.xAxis[0].options.tickInterval = currentTickInterval; chart3.xAxis[0].isDirty = true; } //reset the extremes and the tickInterval to default values function unzoom() { chart1.xAxis[0].options.tickInterval = defaultTickInterval; chart1.xAxis[0].isDirty = true; chart2.xAxis[0].options.tickInterval = defaultTickInterval; chart2.xAxis[0].isDirty = true; chart3.xAxis[0].options.tickInterval = defaultTickInterval; chart3.xAxis[0].isDirty = true; chart1.xAxis[0].setExtremes(null, null); chart2.xAxis[0].setExtremes(null, null); chart3.xAxis[0].setExtremes(null, null); } $(document).ready(function() { $('#btn').click(function(){ unzoom(); }); var myPlotLineId = "myPlotLine"; chart1 = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'line', zoomType: 'x', //x axis only borderColor: '#003399', //'#022455', borderWidth: 1, isZoomed:false }, title: { text: 'Height Versus Weight' }, subtitle: { text: 'Source: Notional Test Data' }, xAxis: { title: { enabled: true, text: 'Height (cm)' }, tickInterval:5, startOnTick: true, endOnTick: true, showLastLabel: true, events:{ afterSetExtremes:function(){ if (!this.chart.options.chart.isZoomed) { var xMin = this.chart.xAxis[0].min; var xMax = this.chart.xAxis[0].max; var zmRange = computeTickInterval(xMin, xMax); chart1.xAxis[0].options.tickInterval =zmRange; chart1.xAxis[0].isDirty = true; chart2.xAxis[0].options.tickInterval = zmRange; chart2.xAxis[0].isDirty = true; chart3.xAxis[0].options.tickInterval = zmRange; chart3.xAxis[0].isDirty = true; chart2.options.chart.isZoomed = true; chart3.options.chart.isZoomed = true; chart2.xAxis[0].setExtremes(xMin, xMax, true); chart3.xAxis[0].setExtremes(xMin, xMax, true); chart2.options.chart.isZoomed = false; chart3.options.chart.isZoomed = false; } } } }, yAxis: { title: { text: 'Weight (kg)' } }, tooltip: { formatter: function() { return '' + this.x + ' km, ' + this.y + ' km'; } }, legend: { layout: 'vertical', align: 'left', verticalAlign: 'top', x: 100, y: 70, floating: true, backgroundColor: '#FFFFFF', borderWidth: 1 }, plotOptions: { scatter: { marker: { radius: 5, states: { hover: { enabled: true, lineColor: 'rgb(100,100,100)' } } }, states: { hover: { marker: { enabled: false } } } } }, series: [{ name: 'Group 1', color: 'rgba(223, 83, 83, .5)', data: [[146.2, 51.6], [147.5, 59.0], [148.5, 49.2], [151.0, 63.0], [155.8, 53.6], [157.0, 59.0], [159.1, 47.6], [161.0, 69.8], [166.2, 66.8], [168.2, 75.2], [172.5, 55.2], [174.9, 54.2], [176.9, 62.5], [180.4, 42.0], [190.0, 50.0]] }, { name: 'dummy_data', //put this in so that x axis is consistent between 3 charts to begin with color: 'rgba(119, 152, 191, .5)', showInLegend: false, data: [[145.0, 0.0], [200.0, 0.0]]}] }, function(chart) { //add this function to the chart definition to get synchronized crosshairs syncronizeCrossHairs(chart); }); chart2 = new Highcharts.Chart({ chart: { renderTo: 'container2', type: 'line', zoomType: 'x', //x axis only borderColor: '#003399', //'#022455', borderWidth: 1, isZoomed:false /*events: { selection: function(event) { //this function should zoom chart1, chart2, chart3 according to selected range controllingChart = "chart2"; setTickInterval(event); } }*/ }, title: { text: 'Height Versus Weight' }, subtitle: { text: 'Source: Notional Test Data' }, xAxis: { title: { enabled: true, text: 'Height (cm)' }, tickInterval:5, startOnTick: true, endOnTick: true, showLastLabel: true, events: { afterSetExtremes: function() { if (!this.chart.options.chart.isZoomed) { var xMin = this.chart.xAxis[0].min; var xMax = this.chart.xAxis[0].max; var zmRange = computeTickInterval(xMin, xMax); chart1.xAxis[0].options.tickInterval =zmRange; chart1.xAxis[0].isDirty = true; chart2.xAxis[0].options.tickInterval = zmRange; chart2.xAxis[0].isDirty = true; chart3.xAxis[0].options.tickInterval = zmRange; chart3.xAxis[0].isDirty = true; chart1.options.chart.isZoomed = true; chart3.options.chart.isZoomed = true; chart1.xAxis[0].setExtremes(xMin, xMax, true); chart3.xAxis[0].setExtremes(xMin, xMax, true); chart1.options.chart.isZoomed = false; chart3.options.chart.isZoomed = false; } } } }, yAxis: { title: { text: 'Weight (kg)' } }, tooltip: { formatter: function() { return '' + this.x + ' km, ' + this.y + ' km'; } }, legend: { layout: 'vertical', align: 'left', verticalAlign: 'top', x: 100, y: 70, floating: true, backgroundColor: '#FFFFFF', borderWidth: 1 }, plotOptions: { scatter: { marker: { radius: 5, states: { hover: { enabled: true, lineColor: 'rgb(100,100,100)' } } }, states: { hover: { marker: { enabled: false } } } } }, series: [{ name: 'dummy_data', color: 'rgba(223, 83, 83, .5)', showInLegend: false, data: [[145.0, 0.0], [200.0, 0.0]]}, { name: 'Group 2', color: 'rgba(119, 152, 191, .5)', data: [[151.0, 65.6], [166.3, 71.8], [167.5, 80.7], [168.5, 72.6], [172.2, 78.8], [174.5, 74.8], [175.0, 86.4], [181.5, 78.4], [182.0, 62.0], [184.0, 81.6], [185.0, 76.6], [186.8, 83.6], [186.0, 90.0], [188.0, 74.6], [190.0, 71.0], [192.0, 79.6], [193.7, 93.8], [196.5, 70.0], [199.0, 72.4]]}] }, function(chart) { //add this function to the chart definition to get synchronized crosshairs //this function needs to be added to each syncronized chart syncronizeCrossHairs(chart); }); chart3 = new Highcharts.Chart({ chart: { renderTo: 'container3', type: 'line', zoomType: 'x', //x axis only borderColor: '#003399', //'#022455', borderWidth: 1, isZoomed:false /*events: { selection: function(event) { //this function should zoom chart1, chart2, chart3 controllingChart = "chart3"; setTickInterval(event); } }*/ }, title: { text: 'Height Versus Weight' }, subtitle: { text: 'Source: Notional Test Data' }, xAxis: { title: { enabled: true, text: 'Height (cm)' }, tickInterval:5, startOnTick: true, endOnTick: true, showLastLabel: true, events: { afterSetExtremes: function() { if (!this.chart.options.chart.isZoomed) { var xMin = this.chart.xAxis[0].min; var xMax = this.chart.xAxis[0].max; var zmRange = computeTickInterval(xMin, xMax); chart1.xAxis[0].options.tickInterval =zmRange; chart1.xAxis[0].isDirty = true; chart2.xAxis[0].options.tickInterval = zmRange; chart2.xAxis[0].isDirty = true; chart3.xAxis[0].options.tickInterval = zmRange; chart3.xAxis[0].isDirty = true; chart1.options.chart.isZoomed = true; chart2.options.chart.isZoomed = true; chart1.xAxis[0].setExtremes(xMin, xMax, true); chart2.xAxis[0].setExtremes(xMin, xMax, true); chart1.options.chart.isZoomed = false; chart2.options.chart.isZoomed = false; } } } }, yAxis: { title: { text: 'Weight (kg)' } }, tooltip: { formatter: function() { return '' + this.x + ' km, ' + this.y + ' km'; } }, legend: { layout: 'vertical', align: 'left', verticalAlign: 'top', x: 100, y: 70, floating: true, backgroundColor: '#FFFFFF', borderWidth: 1 }, plotOptions: { scatter: { marker: { radius: 5, states: { hover: { enabled: true, lineColor: 'rgb(100,100,100)' } } }, states: { hover: { marker: { enabled: false } } } } }, series: [{ name: 'dummy_data', //I put this in to try to get the charts to have the same range on the x axis color: 'rgba(223, 83, 83, .5)', showInLegend: false, data: [[145.0, 0.0], [200.0, 0.0]]}, { name: 'Group 3', color: 'rgba(119, 152, 191, .5)', data: [[153.0, 65.6], [156.3, 71.8], [167.5, 80.7], [169.5, 72.6], [171.2, 78.8], [172.5, 74.8], [177.0, 86.4], [181.5, 78.4], [183.0, 62.0], [184.0, 81.6], [185.0, 76.6], [186.2, 83.6], [187.0, 90.0], [188.7, 74.6], [190.0, 71.0], [192.0, 79.6], [195.7, 93.8], [196.5, 70.0], [199.4, 72.4]]}] }, function(chart) { //add this function to the chart definition to get synchronized crosshairs //this function needs to be added to each syncronized chart syncronizeCrossHairs(chart); }); }); }); });

http://jsfiddle.net/Gv7Tg/27/

这篇关于在HighCharts中链接多个图表控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！