Проблемы, зависающие над диаграммой диаграммы ChartJS после перерисовывания

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/

Update

Да, выше обработчик сохраняет текущую диаграмму внутри его определения поэтому все экземпляров из 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/