Zingchart-将一个函数传递给工具提示
Zingchart - passing a function to the tooltip
是否可以将函数传递给Zingchart Json中的工具提示键?
到目前为止,我尝试了以下内容:
$scope.applyTooltip = function (timestamp) {
console.log(timestamp);
var tooltip = "<div>";
var data = {
timestamp1: {
param1: "bla",
param2: "foo,
},
...
}
for(var param in data){
console.log(param);
tooltip += param+": "+data[param]+"<br>";
}
tooltop += "</div>;
return tooltip;
}
$scope.graphoptions = {
//...
//just displaying the relevant options
plot: {
"html-mode": true,
tooltip: $scope.applyTooltip("%kt"),
}
}
}
但函数会按原样获取字符串"%kt",而不是悬停Plot所需的X值。那么,在函数中传递X值是怎么可能的呢?
tooltip : {
jsRule : "CustomFn.formatTooltip()"
}
在该函数中,将提供一个参数,该参数将包含有关鼠标悬停在其上的节点的信息,如value
、scaletext
、plotindex
、nodeindex
、graphid
等。只需为工具提示返回一个对象(包括格式化的文本),ZingChart就会处理剩下的内容。下面提供了示例。
jsRule
需要注意的一点是,函数名称必须全局可访问,因为ZingChart不接受内联函数。我们意识到了这个问题,并计划在未来版本中将其作为一个选项。
CustomFn = {};
var myConfig = {
type: "line",
tooltip : {
jsRule : "CustomFn.formatTooltip()"
},
series : [
{
values : [1,3,2,3,4,5,4,3,2,1,2,3,4,5,4]
},
{
values : [6,7,8,7,6,7,8,9,8,7,8,7,8,9,8]
}
]
};
CustomFn.formatTooltip = function(p){
var dataset = zingchart.exec('myChart', 'getdata');
var series = dataset.graphset[p.graphindex].series;
var tooltipText = "";
for (var i=0; i < series.length; i++) {
tooltipText += "Series " + i + " : " + series[i].values[p.nodeindex] + "";
if (i !== series.length-1) {
tooltipText += "'n";
}
}
return {
text : tooltipText,
backgroundColor : "#222"
}
}
zingchart.render({
id : 'myChart',
data : myConfig,
height: 400,
width: 600
});
<!DOCTYPE html>
<html>
<head>
<script src= 'https://cdn.zingchart.com/2.3.1/zingchart.min.js'></script>
</head>
<body>
<div id='myChart'></div>
</body>
</html>
相关文章:
- d3.js Chord图的动态工具提示
- Graphiti中是否有任何工具提示功能
- "工具提示"jQuery插件坏了
- 如何在jQuery点击函数中添加并显示引导工具提示
- Zingchart-将一个函数传递给工具提示
- 如何在函数内部为jquery工具提示调用不同的var字符串
- 如何使工具提示从函数本身之外的元素工作
- j查询工具提示引发错误:未定义函数
- 来自外部函数的Highchart工具提示和事件
- JavaScript/jQuery 工具提示函数使用“this”
- 引导工具提示数据[选项] 不是一个函数
- 如何获取工具提示以在现有 JS 函数中工作
- DOJO 工具提示给出“未捕获的类型错误:对象不是函数”
- 在剑道图的工具提示上添加聚合函数
- 平板电脑友好的悬停工具提示,显示基于javascript函数结果的动态文本
- 引导工具提示:如何使用javascript函数指定工具提示文本
- Highcharts工具提示格式化器返回函数抛出未捕获的TypeError: j.i call不是函数
- 图表JS:在工具提示模板中使用函数
- 将函数传递给工具提示
- 如何从配置对象外部调用Highcharts工具提示格式化程序函数