グラフを追加する番号

私のドーナツチャート内のデータを更新しようとしていますが、AddDataボタンを押したときにaddData関数が機能しないようです。私は8のデータと別のラベルとして "不明"を追加すると仮定しています。助けてください。グラフを追加する番号

<DOCTYPE html> 
<html> 
<head> 
<title>ChartJS - Pie Chart</title> 
    <script src="jquery-3.2.1.js"></script> 
    <script 
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"> 
</script> 
    <link rel="stylesheet" type="text/css" href="template.css"> 
</head> 
<body> 
<div class="block">   
    <input type="button" value="Add Data" onclick="addData()"> 
<canvas id="doughnut-chart" width="400" height="400"></canvas> 
<script> 
new Chart(document.getElementById("doughnut-chart"), { 
type: 'doughnut', 
data: { 
    labels: ["Male", "Female"], 
    datasets: [ 
    { 
     label: "Population (millions)", 
     backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"], 
     data: [6,4] 
    } 
    ] 
}, 
options: { 
    title: { 
    display: true, 
    text: 'Predicted world population (millions) in 2050' 
    } 
} 
}); 
function addData() { 
Chart.data.datasets[0].data[2] = 8; 
Chart.data.labels[2] = "Unknown"; 
Chart.update(); 
} 
</script> 
</div> 
</body> 
</html>

出典

2017-09-07 Ryan Arellano

私はあなたのコードではなく、自明のエラーメッセージが表示されます。

TypeError: Chart.data is undefined

ライブラリが同じドキュメント内で複数のグラフを描くことができます。最も簡単な修正は変数に格納することです：

var myDoughnutChart = new Chart(document.getElementById("doughnut-chart"), { 
 
type: 'doughnut', 
 
data: { 
 
    labels: ["Male", "Female"], 
 
    datasets: [ 
 
    { 
 
     label: "Population (millions)", 
 
     backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"], 
 
     data: [6,4] 
 
    } 
 
    ] 
 
}, 
 
options: { 
 
    title: { 
 
    display: true, 
 
    text: 'Predicted world population (millions) in 2050' 
 
    } 
 
} 
 
}); 
 
function addData(whatChart) { 
 
    whatChart.data.datasets[0].data[2] = 8; 
 
    whatChart.data.labels[2] = "Unknown"; 
 
    whatChart.update(); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script> 
 

 
<div class="block">   
 
    <input type="button" value="Add Data" onclick="addData(myDoughnutChart)"> 
 
    <canvas id="doughnut-chart" width="400" height="400"></canvas> 
 
</div>

出典

2017-09-07 06:08:11

答えて

関連する問題