Zingchart

Question

是否可以将函数传递给 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”，而不是悬停图的所需 X 值。那么如何在函数中传递X值呢？

Answer 1

ZingChart 不允许通过配置对象传入函数。相反，有一个名为 "jsRule" 的属性，它允许您将名称传递给每个工具提示事件期间要评估的函数。

tooltip : {
  jsRule : "CustomFn.formatTooltip()"
}

在该函数中，将提供一个参数，其中包含有关您鼠标悬停的节点的信息，例如 value、scaletext、plotindex、nodeindex、 graphid，等等。只需 return 一个工具提示对象（包括格式化文本），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>

Zingchart - 将函数传递给工具提示

Zingchart - passing a function to the tooltip

javascript

charts

tooltip

angularjs