다시 그려진 후 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/

업데이트

예, 위의 핸들러가 정의주에게 동일한 속성 ko.bindingHandlers.chartType.chart 바인딩chartType 그렇게 모든 인스턴스 내에서 현재 차트를 저장합니다. 이 문제는 각 결합 요소 (예로서 <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/