Question

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

我是js＆amp; amp;的初学者JS。我需要使用表格表将静态值更改为动态值。如果我们把价值放在表格和表格中然后提交将更改图表。

（chartjs）

我正在使用Chart.min.js

Answer 1

嗯，首先你应该阅读docs，但我会根据你的问题假设你不太了解英语。

您要查找的方法是.addData( segmentData, index )

Answer 2

我已经提交了link。

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

});

}）;

如何使用chartjs在Doughnutchart中添加动态值？

2 个答案: