Javascript 如何使用chartjs将动态值放入Doughnutchart？

我是chartjs的初学者。我需要一个动态值更新使用表单表提交按钮

（chartjs）

我正在使用Chart.min.js

<form>
   <ul>
     <li>
         <p>
           <label>Mobilizations</label> <input type='text' id="Doughnut-1" />
         </p>
     </li>
     <li>
          <p>
            <label>Blue print</label> <input type='text' id="Doughnut-2" />
          </p>
     </li>
     <li>
          <p>
            <label>Realization</label> <input type='text' id="Doughnut-3" />
          </p>
     </li>
     <li>
          <p>
            <label>Final Preparation</label> <input type='text' id="Doughnut-4" />
          </p>
     </li>
     <li>
          <p>
             <label>Golive & Support</label> <input type='text' id="Doughnut-5" />
          </p>
     </li>

     <li>
         <input type="button" id="submit-1" value="submit" />
     </li>
   </ul>

</form>




 var DoughnutData = [
     {
         label: "Mobilizations",
         value: 60,

         color: "#165c91"
     },
     {
         label: "Blue print",
         value: 60,
         color: "#0070c0"
     },
     {
         label: "Realization",
         value: 60,
         color: "#157cc0"
     },
     {
         label: "Final Preparation",
         value: 60,
         color: "#0d74be"
     },
      {
          label: "Golive & Support",
          value: 60,
          color: "#0a5184"
      },


 ];



 var DoughnutOptions = {
     segmentShowStroke: false,
     animateScale: true

 }
 // get Doughnut chart canvas
 var Doughnut = document.getElementById("Doughnut").getContext("2d");

 // draw Doughnut chart
 new Chart(Doughnut).Doughnut(DoughnutData, DoughnutOptions);

动员




蓝图




实现




最后准备




Golive&Support





var DoughnutData=[
{
标签：“动员”，
价值：60，
颜色：“165c91”
},
{
标签：“蓝图”，
价值：60，
颜色：“0070c0”
},
{
标签：“实现”，
价值：60，
颜色：“157cc0”
},
{
标签：“最终准备”，
价值：60，
颜色：“0d74be”
},
{
标签：“Golive&Support”，
价值：60，
颜色：“0a5184”
},
];
var DoughnutOptions={
错误：错误，
动画比例：对
}
//获取油炸圈饼图表画布
var Doughnut=document.getElementById（“Doughnut”）.getContext（“2d”）；
//画油炸圈饼图
新图表（甜甜圈）。甜甜圈（甜甜圈数据，甜甜圈选项）；

我是js&js的初学者。我需要使用表单表将静态值更改为动态值。如果我们将该值放入表中并提交，则会更改图表

（chartjs）

---

我用的是Chart.min.js，首先你应该读一下，但我会根据你的问题假设你不太懂英语

<form>
   <ul>
     <li>
         <p>
           <label>Mobilizations</label> <input type='text' id="Doughnut-1" />
         </p>
     </li>
     <li>
          <p>
            <label>Blue print</label> <input type='text' id="Doughnut-2" />
          </p>
     </li>
     <li>
          <p>
            <label>Realization</label> <input type='text' id="Doughnut-3" />
          </p>
     </li>
     <li>
          <p>
            <label>Final Preparation</label> <input type='text' id="Doughnut-4" />
          </p>
     </li>
     <li>
          <p>
             <label>Golive & Support</label> <input type='text' id="Doughnut-5" />
          </p>
     </li>

     <li>
         <input type="button" id="submit-1" value="submit" />
     </li>
   </ul>

</form>




 var DoughnutData = [
     {
         label: "Mobilizations",
         value: 60,

         color: "#165c91"
     },
     {
         label: "Blue print",
         value: 60,
         color: "#0070c0"
     },
     {
         label: "Realization",
         value: 60,
         color: "#157cc0"
     },
     {
         label: "Final Preparation",
         value: 60,
         color: "#0d74be"
     },
      {
          label: "Golive & Support",
          value: 60,
          color: "#0a5184"
      },


 ];



 var DoughnutOptions = {
     segmentShowStroke: false,
     animateScale: true

 }
 // get Doughnut chart canvas
 var Doughnut = document.getElementById("Doughnut").getContext("2d");

 // draw Doughnut chart
 new Chart(Doughnut).Doughnut(DoughnutData, DoughnutOptions);

---

您正在寻找的方法是

.addData（segmentData，index）

我已经提交了

---

}))

嗨，谢谢你的回复。是的，英语是我的第二语言。好啊我完成我的图表。value:parseInt（$（“#Doughnut-1”）.val（）），这里的问题是submit按钮将输入值发送到某处，从而重新加载页面。所以，在这种情况下，这是行不通的。您可以做的是向输入（或按钮）添加一个事件侦听器，并相应地更改值。例如，

$（'button'）。在（'click'，function（）{此处添加输入处理}）上
 $(document).ready(function () {
$("#submit-1").click(function (event) {


// Doughnut chart data
var DoughnutData = [
    {
        label: "Mobilizations",
        value: parseInt($("#Doughnut-1").val()),
        color: "#165c91" 
    },
    {
        label: "Blue print",
        value: parseInt($("#Doughnut-2").val()),
        color: "#0070c0"
    },
    {
        label: "Realization",
        value: parseInt($("#Doughnut-3").val()),
        color: "#157cc0"
    },
    {
        label: "Final Preparation",
        value: parseInt($("#Doughnut-4").val()),
        color: "#0d74be"
    },
     {
         label: "Golive & Support",
         value: parseInt($("#Doughnut-5").val()),
         color: "#0a5184"
     },
];

$("#Doughnut-Input form").bind("click", function () {
    $("input[type=text], textarea").val("");
});


// Doughnut chart options
var DoughnutOptions = {
    segmentShowStroke: false,
    animateScale: true,


}
// get Doughnut chart canvas
var Doughnut = document.getElementById("Doughnut").getContext("2d");

// draw Doughnut chart
new Chart(Doughnut).Doughnut(DoughnutData, DoughnutOptions);

});