作者：highcharts | 时间：2013-12-18 22:49:56 | [小 大] | 来源：highcharts入门课程 |
阅读：28905 |
：
1 | 收藏
highcharts，图表，实战，Ajax，动态，series，异步，tooltip，单位，对应
[
摘要]：
今天有一个朋友有这样一个问题，后台返回json数据，json内包含多个series序列值外加每一个序列所对应的单位，目的是需要在数据提示框toolip显示的时候，展示数据的时候可以将其对应的单位显示出来。基于这样的动态数据，我们要实现这样的一个目标可能得按照如下方案进行：
1、获得json数据后将其每一个series名称和对应的单位存入一个全局的二维字符串数组内；
2、在展示每一个数据点的提示框信息tooltip的时候，我们需要在其formatter格式化方法内动态根据当前数据点所处序列的名称去全局二维数组内进行匹配得到对应的单位然后组装tooltip信息即可。
有了上面两条思路，接下来的事情就好办多了的，任何问题只要有了解决方案就变得不是问题了的。
一、全局二维数组的获得
封装一个js方法用于遍历json数据，然...
今天有一个朋友有这样一个问题，后台返回json数据，json内包含多个series序列值外加每一个序列所对应的单位，目的是需要在数据提示框toolip显示的时候，展示数据的时候可以将其对应的单位显示出来。基于这样的动态数据，我们要实现这样的一个目标可能得按照如下方案进行：
1、获得json数据后将其每一个series名称和对应的单位存入一个全局的二维字符串数组内；
2、在展示每一个数据点的提示框信息tooltip的时候，我们需要在其formatter格式化方法内动态根据当前数据点所处序列的名称去全局二维数组内进行匹配得到对应的单位然后组装tooltip信息即可。
有了上面两条思路，接下来的事情就好办多了的，任何问题只要有了解决方案就变得不是问题了的。
一、全局二维数组的获得
封装一个js方法用于遍历json数据，然后将其每一组series名称和对应的单位存入数组内。
//定义全局二维数组
var TwoArray = new Array();
//根据json对象获得二维数组
function GetTwoArray(jsonList)
{
var Obj = new Array();
for(var i = 0;i<jsonList.length;i++)
{
//将对应数据压入二维数组内
Obj .push(new Array(jsonList[i].name,jsonList[i].unit));
}
return Obj;
}
二、编写tooltip的格式化方法
tooltip的格式化方法我们一向都是在formatter内进行编写，这里我们也封装一个方法，根据当前数据点对象返回所在序列匹配到的单位名称。实例代码段如下所示：
tooltip: {
formatter:function(){
//在toolTip的格式化方法内获取对应单位
var unit = GetCurSeriesUnit(this);
var tooltipStr = "";
tooltipStr = "<b>"+this.series.name+"</b><br/>";
tooltipStr += this.x+"："+this.y+"("+unit+")";
return tooltipStr;
}
},
封装的方法如下所示：
///根据数据点对象获取当前数据点所在序列在二维数组内所匹配到的单位名称
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;
}
为了效果明显我们模拟了一个三组数据的二维数组数据，如下所示：
//全局二维数组
var TwoArray = new Array();
//为了模拟效果我们直接在这里进行造数据
TwoArray.push(new Array("A","美元"));
TwoArray.push(new Array("B","千克"));
TwoArray.push(new Array("C","斤"));
于是我们得到这样效果，如下图所示：
上面的实例中的数据提示框是针对单一序列显示的，如果设置了tooltip的shared为共享，那么数据提示框的格式化方法将会进行修改，不然会报错。修改的方案如下所示：
1、获取当前位置的数据点集合，逐个遍历然后根据序列名称匹配出对应的单位以及其他信息。
改造后的格式化方法如下所示：
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;
}
},
最终得到的效果如下图所示：
相关文章
精彩导读
热门资讯
关注我们
