文章/答案/技术大牛

发布

社区首页 >问答首页 >Zing图表-将函数传递给工具提示

问Zing图表-将函数传递给工具提示
EN

Stack Overflow用户

提问于 2016-05-04 09:03:45

回答 1查看 747关注 0票数 5

是否可以将函数传递给Zingchart中的工具提示键？

到目前为止，我尝试了以下几种方法：

  $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“，而不是悬停点的想要的X值。那么，如何在函数中传递X值呢？

tooltip

zingchart

javascript

angularjs

charts

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-05-04 21:27:36

ZingChart不允许通过配置对象传递函数。相反，有一个名为"jsRule“的属性，它允许您传递要在每个工具提示事件中计算的函数的名称。

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>

票数 7

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/37023113

复制

相似问题

问Zing图表-将函数传递给工具提示
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Zing图表-将函数传递给工具提示EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Zing图表-将函数传递给工具提示
EN