Question

我一直试图让淘汰赛与chart.js（http://www.chartjs.org/）合作。我发现knockout.chart（https://github.com/grofit/knockout.chart）有人已经很友好地分享了。我试图将click事件附加到图表上的一个段，似乎我必须使用chart.js原型方法.getSegmentsAtEvent（event），它使用图表的实例。我的问题是，我不知道如何访问我的图表的实例名称，因为它是在knockout.chart.js文件中创建的。

这就是Chart.js建议我们在他们的文档中使用它的方式：

canvas.onclick = function(evt){
var activePoints = myDoughnutChart.getSegmentsAtEvent(evt);
// => activePoints is an array of segments on the canvas that are at the same position as the click event.
 };

我似乎无法在画布上触发点击事件，因此我一直在尝试使用容器div＆＃34; ifWP＆＃34;。以下是创建图表的knockout.chart.js文件中的部分：

init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
  var allBindings = allBindingsAccessor();
  var chartBinding = allBindings.chart;
  var activeChart;
  var elementWidth = element.width;
  var elementHeight = element.height;

 var createChart = function() {
   var chartType = ko.unwrap(chartBinding.type);
   var context2d = element.getContext("2d");
   var data = ko.toJS(chartBinding.data);
   var options = ko.toJS(chartBinding.options)
   convertAllDataToNumeric(data); // ko treats values from inputs as strings, chart no likey
         activeChart = new Chart(context2d)[chartType](data, options);
   };

这是我的HTML：

<div id="ifWP" data-bind="if: isWP">
    <canvas id="WPChart" width="300" height="300" data-bind="chart: { 
        type: 'Doughnut', 
        data: testArray, 
        options: { observeChanges: true, throttle: 100 } }">
    </canvas>
 </div>

这就是我想要访问js文件中图表片段细节的地方：

$("#ifWP").click(function (evt) {
var activePoints = self.activeChart.getSegmentsAtEvent(evt);
self.method(activePoints[0].label);
}

我可能会忽视一些小事。任何帮助将不胜感激。

knockout.chart.js：如何获取图表的实例ID

0 个答案: