最后呈上完整实例代码，希望可以给你一些建议：
var chart = null;
//全局二维数组
var TwoArray = new Array();
//为了模拟效果我们直接在这里进行造数据
TwoArray.push(new Array("A","美元"));
TwoArray.push(new Array("B","千克"));
TwoArray.push(new Array("C","斤"));
$(function () {
chart = new Highcharts.Chart({
chart:{
renderTo:"container",
type:"line"
},
title:{
text:"动态设置单位实例呈现"
},
subtitle:{
text:"from:"
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
tooltip: {
shared:true,//共享数据提示框
formatter:function(){
var curPointList = this.points;
var tooltipStr = "";
//逐个返回单位进行数据拼接然后返回提示信息
for(var i = 0;i<curPointList.length;i++)
{
//在toolTip的格式化方法内获取对应单位
var unit = GetCurSeriesUnit(curPointList[i]);
var IntooltipStr = "";
IntooltipStr = "<b>"+curPointList[i].series.name+"</b><br/>";
IntooltipStr += curPointList[i].x+"："+curPointList[i].y+"("+unit+")";
tooltipStr += IntooltipStr;
tooltipStr += "<br/>";
}
return tooltipStr;
}
},
credits:{
text:"www.stepday.com",
href:"http://www.stepday.com",
style:{
color:"red"
}
},
series: [{
name:"A",
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
},
{
name:"B",
data: [9.9, 1.5, 6.4, 9.2, 4.0, 6.0, 5.6, 8.5, 6.4, 4.1, 5.6, 4.4]
},
{
name:"C",
data: [2.9, 7.5, 1.4, 29.2, 44.0, 76.0, 35.6, 48.5, 16.4, 14.1, 9.6, 5.4]
}]
});
});
///根据数据点对象获取当前数据点所在序列在二维数组内所匹配到的单位名称
function GetCurSeriesUnit(pointObj)
{
var unitName = "";
var curSeriesName = pointObj.series.name;
//在二维数组内进行匹配
for(var i = 0;i<TwoArray.length;i++)
{
if(curSeriesName == TwoArray[i][0])
{
unitName = TwoArray[i][1];
break;
}
}
return unitName;
}
另附效果展示查看地址：
多分享，多进步；多谢支持，有问题亲随时留言讨论！
highcharts，图表，实战，Ajax，动态，series，异步，tooltip，单位，对应
本文为原创型文章转载请尊重他人劳动成果并注明出处：?753
可以扫描本站该博客文章的QR二维码进行访问
上一篇：highcharts图表实战篇：如何动态添加图表坐标轴(xAxis/yAxis)和series序列数据
下一篇：highcharts图表实战篇：如何通过监听柱子的MouseOver和MouseOut事件实现PlotLine(划分线)的添加与删除
加精
17
踩扁
0
查看评论
烟花易冷 2015-2-10 11:35:33
1楼
把取数据的步骤也写出来吧 从后台获取json串
关联阅读
01 ECharts图表初级入门教程之xAxis-axisLabel:如何设置X轴坐标刻度的样式
02 highcharts图表中级入门之xAxis label：X(横)坐标刻度值过长截断多行(换行)显示问题说明
03 highcharts图表入门之stackLabels：堆叠图(stacking)中如何显示每一组数据的总数于柱子之上
04 ECharts图表中级入门之itemStyle：如何让数据点的数据值非常直观地显示以及位置控制
05 highcharts图表中级入门之dirlldown：如何实现pie(饼状图)的下钻图
06 关于页面动态创建多个highcharts图表所产生的问题汇总以及分析
07 ECharts图表组件入门教程：如何动态读取数组内的数据至echarts图表且动态更新图表Y轴刻度单位
08 highcharts图表之bubble：气泡图的气泡大小控制以及影响因素剖析
09 highcharts入门之tooltip：如何设置数据点不显示数据提示框且显示十字丝crosshairs
10 highcharts图表高级入门之polar：极地图的基本配置以及一些关键配置说明
11 asp.net+Ajax如何实现Highcharts图表组件支持大数据（上万个数据点)
12 ECharts图表入门初级篇：如何设置绘图区域(grid)和容器大小一样
13 ECharts图表初级入门篇：如何配置ECharts图表相关文件以及基本配置呈现最基本线性图表
14 ECharts图表组件中级入门（Axis-axisLabel）：图表坐标刻度过多如何设置刻度间隔（interval）以及配置说明
相关文章
精彩导读
热门资讯
关注我们
