2017-09-19 17 views
0

chartjsに問題があります。サーバー側から値を更新したいのですが、まずこれを行う関数を呼び出すが、実行されません。javascript関数でchartjsを更新する

window.onload = function() { 
//tested values 
        var lab = { 
         global property 
         fontSize: 8, 
         boxWidth: 20 
        } 
        var data = { 
         labels: ["Done", "In progress", "Not"], 
         datasets: [{label: '# of Votes', 
          data: [4, 15, 3], 
          backgroundColor: [ 
           'rgba(255, 99, 132, 0.2)', 
           'rgba(54, 162, 235, 0.2)', 
           '#ccf9d6' 
          ], 
          borderColor: [ 
           'rgba(255,99,132,1)', 
           'rgba(54, 162, 235, 1)', 
           'green' 
          ], 
          borderWidth: 1 
         }] 
        } 
        addData('#myChart',lab, data); 
       }; 

//function 
       function addData(chart, label, data) { 
        chart.data.labels.push(label); 
        chart.data.datasets.forEach((dataset) => {dataset.data.push(data);}); 
       chart.update(); 
       } 

とエラー:Cannot read property 'labels' of undefined

HTMLコード:

<canvas id="myChart" class="chartjs hidden-xs" width="300" height="150" ></canvas> 

答えて

0

あなたがチャートの文字列IDを渡し、その後、アクセスしようとしているように見える私には、以下の私のコードがありますそれのプロパティ - エラーが発生します。 を実行しています。その理由はUncaught TypeError: Cannot read property 'labels' of undefinedです。なぜなら、"#myChart.data"undefinedです。

documentationを見ると、私はあなたにそれを試すことができました。

function addData(chartID, label, data) { 
    var ctx = document.getElementById(chartID).getContext('2d'); 
    var newChartData = {}; 
    newChartData.type = "bar"; 
    newChartData.data = {}; 
    newChartData.data.labels = ["a","b","c"]; 
    newChartData.data.datasets = []; 
    newChartData.data.labels.push(label); 
    data.datasets.forEach((dataset) =>{newChartData.data.datasets.push(dataset);}); 
    var myChart = new Chart(ctx, newChartData); 
    myChart.update(); 
} 

私はあなたのためにそれをテストすることができました。ここで私はここに別のエラーが表示さフィドルhttps://jsfiddle.net/6avtjuLg/

+0

参照してください。 – Adriano

+0

newChartDataに型を追加してみてください。私は情報で私の答えを更新します –

+0

私はあなたのためにもフィドルを追加しました。 –

0

...あなたがaddData()機能あなたを呼び出すとき

  • 、あなたは文字列値ではなくChartオブジェクトを渡すことです。あなたのlabオブジェクトで

  • "global property"

フレーズをコメントしなかった[OK]を、今エラー何も表示されますが、今そこにあるmy solution

関連する問題