<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript" src="highcharts.js"></script>
<script type="text/javascript" src="highcharts-more.js"></script>
<script type="text/javascript" src="highcharts-zh_CN.js"></script>
</head>
<body>
<div id="container" style="width:100%; margin:0px; padding:0px;"></div>
</body>
</html>
<script type="text/javascript">
/*
本例子的目的是为了演示通过 Dom 事件、Highcharts 事件、Highcharts API 来讲一个页面中的多个图表进行联动的。
本例通过循环创建类似的图表并绑定鼠标的滑动事件来对多个图表进行演示联动效果。
*/
$(function () {
var qxH = window.innerHeight / 2;
/**
* 为了让多个图表的提示框即十字准星线能够联动，这里绑定多个图表的附件 dom 的鼠标事件进行联动
*/
$('#container').bind('mousemove touchmove touchstart', function (e) {
var chart,
point,
i,
event;
for (i = 0; i < Highcharts.charts.length; i = i + 1) {
try {
chart = Highcharts.charts[i];
event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart
point = chart.series[0].searchPoint(event, true); // Get the hovered point
if (point) {
point.highlight(e);
}
} catch (e) { console.log("曲线"+e);}
}
});
/**
* 重写内部的方法， 这里是将提示框即十字准星的隐藏函数关闭
*/
Highcharts.Pointer.prototype.reset = function () {
return undefined;
};
/**
* 高亮当前的数据点，并设置鼠标滑动状态及绘制十字准星线
*/
Highcharts.Point.prototype.highlight = function (event) {
this.onMouseOver(); // 显示鼠标激活标识
this.series.chart.tooltip.refresh(this); // 显示提示框
this.series.chart.xAxis[0].drawCrosshair(event, this); // 显示十字准星线
};
/**
* 同步缩放效果，即当一个图表进行了缩放效果，其他图表也进行缩放
*/
function syncExtremes(e) {
var thisChart = this.chart;
if (e.trigger !== 'syncExtremes') {
Highcharts.each(Highcharts.charts, function (chart) {
if (chart !== thisChart) {
if (chart.xAxis[0].setExtremes) {
chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, { trigger: 'syncExtremes' });
}
}
});
}
}
$('<div class="chart">')
.appendTo('#container')
.highcharts({
chart: {
marginLeft: 40, // Keep all charts left aligned
spacingTop: 20,
height: qxH,//图表高度
spacingBottom: 20,
zoomType: 'x'
},
title: {
text: '三相电流',
align: 'center',
margin: 0,
x: 30
},
credits: {
enabled: false
},
legend: {
//enabled: false,
align: 'left',
verticalAlign: 'top',
y: 0,
x: 60,
floating: true,
borderWidth: 1
},
xAxis: {
crosshair: true,
events: {
setExtremes: syncExtremes
},
labels: {
format: '{value} km'
}
},
yAxis: {
title: {
text: null
}
},
tooltip: {
shared: true, // 提示框是否共享
formatter: function () { // 提示框格式化字符串
var s = this.x;
$.each(this.points, function () {
s += '<br /><span style="color:' + this.point.series.color + ';">' + this.series.name + ':</span><b style="color:' + this.point.series.color + ';">' + this.y + '</b>';
});
return s;
}
},
series: [{
name: 'Ia',
data: [11.833, 12.524, 11.441, 12.651, 9.961, 4.566, 4.617, 4.728, 4.823, 4.844, 4.856, 4.87, 4.702, 4.679, 4.674, 4.641, 4.47, 4.688, 4.798, 4.756, 4.903, 4.919, 5.017, 4.938, 4.879, 4.831, 4.623, 3.887, 3.502, 3.083, 3.123, 3.073, 2.922, 2.827, 2.805, 2.605, 2.743, 2.698, 2.513, 2.41, 2.17, 2.288, 2.308],
color: 'orange',
lineWidth: 0.5
}, {
name: 'Ib',
data: [12.823, 12.524, 11.441, 10.651, 19.961, 4.566, 4.617, 4.728, 4.823, 4.844, 4.856, 4.87, 4.702, 4.679, 4.674, 4.641, 4.47, 4.688, 4.798, 4.756, 4.903, 4.919, 5.017, 4.938, 4.879, 4.831, 4.623, 3.887, 3.502, 3.083, 3.123, 3.073, 2.922, 2.827, 2.805, 2.605, 2.743, 2.698, 2.513, 2.41, 2.17, 2.288, 2.308],
color: 'green',
lineWidth: 0.5
}, {
name: 'Ic',
data: [13.813, 12.524, 11.441, 10.651, 9.961, 14.566, 4.617, 4.728, 4.823, 4.844, 4.856, 4.87, 4.702, 4.679, 4.674, 4.641, 4.47, 4.688, 4.798, 4.756, 4.903, 4.919, 5.017, 4.938, 4.879, 4.831, 4.623, 3.887, 3.502, 3.083, 3.123, 3.073, 2.922, 2.827, 2.805, 2.605, 2.743, 2.698, 2.513, 2.41, 2.17, 2.288, 2.308],
color: 'red',
lineWidth: 0.5
}, {
name: 'I0',
data: [13.813, 12.524, 11.441, 10.651, 11.961, 4.566, 4.617, 4.728, 4.823, 4.844, 4.856, 4.87, 4.702, 4.679, 4.674, 4.641, 4.47, 4.688, 4.798, 4.756, 4.903, 4.919, 5.017, 4.938, 4.879, 4.831, 4.623, 3.887, 3.502, 3.083, 3.123, 3.073, 2.922, 2.827, 2.805, 2.605, 2.743, 2.698, 2.513, 2.41, 2.17, 2.288, 2.308],
color: 'yellow',
lineWidth: 0.5
}]
});
$('<div class="chart">')
.appendTo('#container')
.highcharts({
chart: {
marginLeft: 40, // Keep all charts left aligned
spacingTop: 20,
height: qxH,//图表高度
spacingBottom: 20,
zoomType: 'x'
},
title: {
text: '三相电压',
align: 'center',
margin: 0,
Highcharts多个图表共用一个提示框,每个图表多条曲线
需积分: 50 169 浏览量
2021-01-26
15:39:21
上传
评论 1
收藏 146KB ZIP 举报
xcs_chart.zip （6个子文件） 
highcharts-more.js 82KB highcharts-zh_CN.js 3KB jquery-1.8.3.min.js 91KB highcharts.js 228KB
chart.html 11KB exporting.js 7KB资源评论
