如何使用chartjs在Doughnutchart中放置动态值

How to put dynamic value in Doughnutchart Using chartjs?

本文关键字：动态 Doughnutchart 何使用 chartjs      更新时间：2023-09-26

我是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);

我是js&js。我需要使用表单表将静态值更改为动态值。如果我们把这个值放在表&然后提交将更改图表。

（图表）

我使用的是Chart.min.js

好吧，首先你应该阅读文档，但根据你的问题，我假设你对英语不是很理解。

您正在寻找的方法是.addData( segmentData, index )

我已经提交了链接。

<canvas id="Doughnut" width="310" height="350" ></canvas>
                                            <div id="Doughnut-Input">
                                                <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>


 $(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);
});

})；

相关文章：