chart.js 2.3 данные диаграммы динамической нагрузки

Question

У меня есть круговая диаграмма, которая хочет иметь возможность переключаться между данными MTD и YTD. График для точной загрузки страницы. Мне сложно сменить данные через AJAX с MTD на YTD.

Я просмотрел много сообщений об этом, но все, что я нашел, для старой версии chart.js 1.0.1.

Я хочу использовать последнюю версию chart.js 2.3. Вот код, любая помощь будет принята с благодарностью.

HTML:

<div class="chart-responsive"> 
    <canvas id="myPieChart" /> 
</div> 

JAVASCRIPT:

var pieconfig = { 
    type: 'doughnut', 
    data: { 
    datasets: [{ 
     data: [<cfoutput>#valueList(myPieData.totalAmt)#</cfoutput>], // the returned data looks like this (1254.52,223.50,etc.) 
     backgroundColor: [ 
     "#F7464A", 
     "#46BFBD", 
     "#FDB45C", 
     "#949FB1", 
     "#4D5360", 
     "#60A2C9", 
     "#00A65A", 
     "#D2D6DE", 
     "#4D5360", 
     "#00C0EF" 
     ], 
     label: 'Dataset 1' 
    }], 
    labels: [ 
     <cfoutput>#ListQualify(valueList(myPieData.busUnit), "'", ",")#</cfoutput> // the returned label looks like this ('Joe','Jim',etc.) 
    ] 
    }, 
    options: { 
    responsive: true, 
    legend: { 
     position: 'right', 
    }, 
    title: { 
     display: false, 
     text: 'Chart.js Doughnut Chart' 
    }, 
    animation: { 
     animateScale: true, 
     animateRotate: true 
    } 
    } 
}; 

window.onload = function() { 
    var ctx = document.getElementById("myPieChart").getContext("2d");  
    myDoughnut = new Chart(ctx, pieconfig); 
}; 

Приведенный выше код отлично на странице загрузки работает. Ниже приведен мой код для обновления данных в круговой диаграмме.

$.ajax({ 
    type: "POST", 
    url: "/main/piechartdata/", 
    data: {'workList':'sale','rtype':$rType}, 
    dataType: "json", 
    success: function(rData) { 
    console.log(rData.labels); 
    locData = { 
     type: 'doughnut', 
     data: { 
     datasets: [{ 
      data: rData.datapoint // return data looks like this: 4469.37,2455153.58,672038.48,83.27,58821.22,36606.71 
      backgroundColor: [ 
      "#F7464A", 
      "#46BFBD", 
      "#FDB45C", 
      "#949FB1", 
      "#4D5360", 
      "#60A2C9", 
      "#00A65A", 
      "#D2D6DE", 
      "#4D5360", 
      "#00C0EF" 
      backgroundColor: [ 
      "#F7464A", 
      "#46BFBD", 
      "#FDB45C", 
      "#949FB1", 
      "#4D5360", 
      "#60A2C9", 
      "#00A65A", 
      "#D2D6DE", 
      "#4D5360", 
      "#00C0EF" 
      ], 
      label: 'Dataset 1' 
     }], 
     labels: rData.labels //return data looks like this: 'CBS','CFM','CIA','Millennium','OTHER','Thrifty' 
     }, 
     options: { 
     responsive: true, 
     legend: { 
      position: 'right', 
     }, 
     title: { 
      display: false, 
      text: 'Chart.js Doughnut Chart' 
     }, 
     animation: { 
      animateScale: true, 
      animateRotate: true 
     } 
     } 
    }; 

    var ctx = document.getElementById("myPieChart").getContext("2d");  
    myDoughnut = new Chart(ctx, locData); 

    } 
}); 

Это была моя последняя неудачная попытка. Заранее благодарю за вашу помощь!

Answer 1

У вас есть 2 варианта:

Если вы просто обновление обновления вызова данных() после изменения данных:

myDoughnut.data.datasets[0].data[11] = 300; 
    myDoughnut.update(); 

Update Chart

еще, уничтожить вашу диаграмму сначала уничтожить() и повторной инициализации вашей диаграммы:

myDoughnut.destroy(); 
myDoughnut = new Chart(ctx, locData); 

Destroy Chart

Answer 2

ответ Кено является точным, я буду расширить на нем немного здесь:

У вас уже есть объект диаграммы, называемый myDoughnut здесь, и как любой JavaScript Object, вы можете получить доступ к любому из ых членов оно, подобно класс на традиционном языке.

В вашем случае, после создания locData, вы должны быть в состоянии использовать:

myDoughnut.data = locData; 
myDoughnut.update(); 

Вместо того чтобы создавать новую диаграмму, вы просто заменить данные в существующем графике с новыми данными. Вы должны вызвать update(), чтобы произошли изменения.

Надеюсь, это решит вашу проблему.