Question

我正在使用ChartJS和KnockoutJS，我在排序我的一个条形图时遇到了一些问题。

以下是一个例子：http://jsfiddle.net/norbiu/aqa8w19d/

点击顶部的排序按钮后，条形图正确重绘，但如果我尝试将鼠标悬停在图表的右侧，则会跳回到条形图的原始顺序。删除鼠标会将条形图返回到核心订单。

我做错了吗？

这是我的更新功能：

update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
  var ctx = element.getContext('2d'),
    type = ko.unwrap(valueAccessor()),
    data = ko.toJS(allBindings.get('chartData')),
    options = ko.unwrap(allBindings.get('chartOptions')) || {};

  if (chart) {
    chart.destroy();
    delete chart;
  }

  if (Object.keys(data).length != 0) {
    var chart = new Chart(ctx)[type](data, options);
  }
}

Answer 1

您应修改chartType绑定处理程序，以便在创建新图表之前清除以前创建的图表。否则，新图表的悬停区域将干扰旧图表中的区域。

ko.bindingHandlers.chartType = {
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        if (!allBindings.has('chartData')) {
            throw Error('chartType must be used in conjunction with chartData and (optionally) chartOptions');
        }
    },
    update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
      var ctx = element.getContext('2d'),
        type = ko.unwrap(valueAccessor()),
        data = ko.toJS(allBindings.get('chartData')),
        options = ko.unwrap(allBindings.get('chartOptions')) || {};

      if (chart) {
        console.debug(chart)
        chart.destroy();
        delete chart;
      }

      if (Object.keys(data).length != 0) {
        // destroy old chart
        var self = ko.bindingHandlers.chartType;
        self.chart && self.chart.destroy();
        // create new
        var chart = new Chart(ctx)[type](data, options);
        self.chart = chart;
      }
    },
    chart: null
};

http://jsfiddle.net/aqa8w19d/1/

<强>更新

是的，上面的处理程序将当前图表存储在其定义中，因此chartType绑定的所有实例共享相同的属性ko.bindingHandlers.chartType.chart。可以通过为每个绑定元素单独存储每个图表对象来解决问题（例如，作为<canvas>元素用户属性）：

if (Object.keys(data).length != 0) {
    // destroy old chart
    element.chart && element.chart.destroy();
    // create new
    var chart = new Chart(ctx)[type](data, options);
    element.chart = chart;
}

更新了小提琴：http://jsfiddle.net/aqa8w19d/3/

重绘后将问题悬停在ChartJS条形图上

1 个答案: