データchart.jsを交換して、チャートをリロード[PHP/JS/AJAX]

Question

私chart.jsチャート内のデータを交換しようとしているときに、私はトラブルを抱えています。今では

は、それは私のチャートが設定されている方法は次のとおりです。

<script> 

     var optionsBar = { 
      responsive: true 
     }; 

     var dataBar = { 
      labels: [<?=$mesReferencia?>], 
      datasets: [ 
       { 
        label: "CPF's Enviados", 
        backgroundColor: "rgba(0,51,90,0.8)", 
        borderColor: "rgba(0,51,90,0.9)", 
        borderWidth: 2, 
        hoverBackgroundColor: "rgba(0,51,90,0.9)", 
        hoverBorderColor: "rgba(0,51,90,1)", 
        data: [<?=$cpfsEnviados?>] 
       }, 
       { 
        label: "Propostas Finalizadas", 
        backgroundColor: "rgba(0,130,229,0.8)", 
        borderColor: "rgba(0,130,229,0.9)", 
        borderWidth: 2, 
        hoverBackgroundColor: "rgba(0,130,229,0.9)", 
        hoverBorderColor: "rgba(0,130,229,1)", 
        data: [<?=$propostasFinalizadas?>] 
       }, 
       { 
        label: "Propostas Aprovadas", 
        backgroundColor: "rgba(43,139,74,0.8)", 
        borderColor: "rgba(43,139,74,0.9)", 
        borderWidth: 2, 
        hoverBackgroundColor: "rgba(43,139,74,0.9)", 
        hoverBorderColor: "rgba(43,139,74,1)", 
        data: [<?=$propostasAprovadas?>] 
       } 
      ] 
     }; 


     var optionsLine = { 
      responsive: true 
     }; 

     var dataLine = { 
      labels: [<?=$mesReferencia?>], 
      datasets: [ 
       { 
        label: "Finalizadas", 
        fill: false, 
        backgroundColor: "rgba(255,108,0,0.7)", 
        borderColor: "rgba(255,108,0,1)", 
        borderWidth: 4, 
        data: [<?=$propostasFinalizadas?>] 
       }, 
       { 
        label: "Aprovadas", 
        fill: false, 
        backgroundColor: "rgba(255,246,0,0.6)", 


    borderColor: "rgba(255,246,0,1)",      
       borderWidth: 4, 
       data: [<?=$propostasAprovadas?>] 
      } 
     ] 
    };  

//======================= FUNÇÃO GERA GRÁFICOS ===================================================================== 

    function run(){ 
     var ctx = document.getElementById("graficoBarra").getContext("2d"); 
     var BarChart2 = new Chart(ctx, { 
       type: 'bar', 
       data: dataBar, 
       options: optionsBar   
     });    

     var ctx2 = document.getElementById("graficoLinha").getContext("2d"); 
     var LineChart = new Chart(ctx2, { 
       type: 'line', 
       data: dataLine, 
       options: optionsLine   
     }); 
    } 

    window.onload = run; 

    run(); 
</script> 

はチャートに使用するデータは、 PHP VARSからのものであることを参照してください。 （これらはデフォルトで私のチャートを供給している値です）。

その後、私は私のDBのドロップダウンフィルタデータの配列を有し、かつdataというJavaScriptの配列オブジェクトを返す：

success: function(data){ 
    console.log(data);   
    $("#filtro-rede").text(data[0]['rede']); 
    $("#filtro-loja").text(data[0]['loja']); 
    $("#filtro-mes").text(data[0]['mesReferencia']); 
    $('#cpfsEnviados').text(data[0]['cpfsEnviados']); 
    $("#finalizadas").text(data[0]['propostasFinalizadas']); 
    $("#aprovadas").text(data[0]['propostasAprovadas']); 
    $("#indiceAprovacao").text(data[0]['indiceAprovacao']+'%'); 
    $("#primeirasCompras").text(data[0]['primeirasCompras']); 
    $("#segurosQnt").text(data[0]['seguros']); 
    mascararFiltros(); 
    $(".mask-loading").fadeToggle(500);   
} 

は私のコードでsomeplacesは、この配列に返されたデータが供給されることを参照してください。

すべてはうまくいきましたが、私の唯一の問題は、data[0]['example']という配列のデフォルトのPHPの値を置き換え、ページを更新せずにグラフを再読み込みすることです。任意のアイデア/提案？ありがとう！

Answer 1

私は（run()機能の更新について）私の最初のコメントにあなたに言ったものを忘れてください。私はちょうどあなたが正確にやろうとしていたものをキャッチしていなかった。

だからあなたはあなたがあなたのチャートに養うことを、あなたのPHPのVARSにおけるデータの初期セットを持っています。このデータセットを更新したいとします（AJAX successコールバックで実行する必要があります）。 This answerとthe link it providesは正しい方向を指しているはずです。あなたのsuccessコールバックで

、あなたはそのようなものを追加することができます。

// Update points in the datasets 
// index in datasets[] can be 0, 1 or 2 (three datasets for BarChart) 
BarChart2.datasets[0].points[0].value = data[0]['cpfsEnviados']; 
BarChart2.datasets[1].points[0].value = data[0]['propostasFinalizadas']; 
BarChart2.datasets[2].points[0].value = data[0]['propostasAprovadas']; 
BarChart2.update(); 

// index in datasets[] can be 0 or 1 (two datasets for LineChar) 
LineChart.datasets[0].points[0].value = data[0]['propostasFinalizadas']; 
LineChart.datasets[1].points[0].value = data[0]['propostasAprovadas']; 
LineChart.update(); 

は、それはあなたが探していたものであるなら、私に教えてください。また、多くのJavaScriptコーディング規約では、変数の最初の文字を大文字にすることは避けています。したがって、グラフ変数の名前をbarChart2とlineChartに変更する必要があります。