<script type="text/javascript">
$(function() {
$('#container').highcharts({
chart : {
type : 'line'
},
title : {
text : 'Monthly Average Temperature'
},
subtitle : {
text : 'Source: WorldClimate.com'
},
xAxis : {
categories : ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis : {
title : {
text : 'Temperature (°C)'
}
},
plotOptions : {
line : {
dataLabels : {
enabled : true //此处为了显示对应节点的纵坐标值
},
enableMouseTracking : false //当鼠标或手指定位到节点时显示对应的纵坐标的值
}
},
series : [{
name : 'Tokyo',
data : [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name : 'London',
data : [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
});
$(function() {
$('#container').highcharts({
chart : {
type : 'line'
},
title : {
text : 'Monthly Average Temperature'
},
subtitle : {
text : 'Source: WorldClimate.com'
},
xAxis : {
categories : ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis : {
title : {
text : 'Temperature (°C)'
}
},
plotOptions : {
line : {
dataLabels : {
enabled : true //此处为了显示对应节点的纵坐标值
},
enableMouseTracking : false //当鼠标或手指定位到节点时显示对应的纵坐标的值
}
},
series : [{
name : 'Tokyo',
data : [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name : 'London',
data : [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
});
</script>
鼠标定位或手指点击时现实点值
本文展示了如何使用JavaScript和Highcharts库动态生成折线图,并在鼠标悬停时显示具体数值。
2837

被折叠的 条评论
为什么被折叠?



