Javascript 图表js添加编号_Javascript_Charts_Chart.js_Chart.js2

Javascript 图表js添加编号

javascript charts chart.js

Javascript 图表js添加编号,javascript,charts,chart.js,chart.js2,Javascript,Charts,Chart.js,Chart.js2,我正在尝试更新我的甜甜圈图表中的数据，当按下添加数据按钮时，我的添加数据功能似乎不起作用。我想添加“unknown”作为另一个数据为8的标签。请帮忙 <DOCTYPE html> <html> <head> <title>ChartJS - Pie Chart</title> <script src="jquery-3.2.1.js"></script> <script src="h

我正在尝试更新我的甜甜圈图表中的数据，当按下添加数据按钮时，我的添加数据功能似乎不起作用。我想添加“unknown”作为另一个数据为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>


圆饼图
新图表（document.getElementById（“甜甜圈图表”）{
键入：“甜甜圈”，
数据：{
标签：[“男性”、“女性”]，
数据集：[
{
标签：“人口（百万）”，
背景色：[“3e95cd”、“8e5ea2”、“3cba9f”、“e8c3b9”、“c45850”]，
数据：[6,4]
}
]
},
选项：{
标题：{
显示：对，
正文：“预测2050年世界人口（百万）”
}
}
});
函数addData（）{
Chart.data.dataset[0]。数据[2]=8；
Chart.data.labels[2]=“未知”；
Chart.update（）；
}

我从您的代码中得到了一条不言自明的错误消息：

TypeError:Chart.data未定义

库可以在同一文档中绘制多个图表。最简单的修复方法是将其存储在变量中：

var myDoughnutChart=新图表（document.getElementById（“DoughnutChart”）{
键入：“甜甜圈”，
数据：{
标签：[“男性”、“女性”]，
数据集：[
{
标签：“人口（百万）”，
背景色：[“3e95cd”、“8e5ea2”、“3cba9f”、“e8c3b9”、“c45850”]，
数据：[6,4]
}
]
},
选项：{
标题：{
显示：对，
正文：“预测2050年世界人口（百万）”
}
}
});
功能添加数据（whatChart）{
whatChart.data.datasets[0]。数据[2]=8；
whatChart.data.labels[2]=“未知”；
whatChart.update（）；
}