Zingchart - 関数をツールチップに渡す

Zingchart Jsonのツールチップキーに関数を渡すことはできますか？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"), 
    } 
}

}

をしかし、それはホバープロットの指名手配X-値であり、ないと関数は、文字列「％カラット」を取得します。それでは、ファンクションにX値を渡すことはどのように可能ですか？

出典

2016-05-04 GuyWithCookies

ZingChartでは、構成オブジェクトを通じて関数を渡すことはできません。代わりに、 "jsRule"というプロパティがあります。このプロパティを使用すると、各ツールチップイベント中に評価する関数の名前を渡すことができます。その関数内で

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

、パラメータを使用すると、value、scaletext、plotindex、nodeindex、graphid、そしてより多くのようなにマウスを合わせたノードに関する情報が含まれていますが利用可能になります。ツールヒント（フォーマットされたテキストを含む）のオブジェクトを返すだけで、ZingChartが残りの部分を処理します。例を下に示します。

jsRuleの警告は、ZingChartがインライン関数を受け入れないため、関数名がグローバルにアクセス可能でなければならないということです。私たちはこの問題を認識しており、将来のバージョンではこれをオプションにする予定です。

CustomFn = {}; 
 

 
    var myConfig = { 
 
    \t type: "line", 
 
    \t tooltip : { 
 
    \t jsRule : "CustomFn.formatTooltip()" 
 
    \t }, 
 
    \t series : [ 
 
    \t \t { 
 
    \t \t \t values : [1,3,2,3,4,5,4,3,2,1,2,3,4,5,4] 
 
    \t \t }, 
 
    \t \t { 
 
    \t \t \t values : [6,7,8,7,6,7,8,9,8,7,8,7,8,9,8] 
 
    \t \t } 
 
    \t ] 
 
    }; 
 
    
 
    
 
    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({ 
 
\t id : 'myChart', 
 
\t data : myConfig, 
 
\t height: 400, 
 
\t width: 600 
 
});

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <script src= 'https://cdn.zingchart.com/2.3.1/zingchart.min.js'></script> 
 
\t </head> 
 
\t <body> 
 
\t \t <div id='myChart'></div> 
 
\t </body> 
 
</html>

出典

2016-05-04 21:27:36

Zingchart - 関数をツールチップに渡す

答えて

関連する問題