Question

我正在尝试使用文本框中的值生成饼图。我正在使用Chart.js。这是具有硬编码值的代码，它工作正常：

<script>
        var sharePiePolorDoughnutData = [
        {
            value: 50,
            color: "#455C73",
            highlight: "#34495E",
            label: "Si Day"
    },
        {
            value: 50,
            color: "#9B59B6",
            highlight: "#B370CF",
            label: "Si Night"
    },
        {
            value: 150,
            color: "#BDC3C7",
            highlight: "#CFD4D8",
            label: "Mi Day"
    }

];

    $(document).ready(function () {
        window.myPie = new Chart(document.getElementById("canvas_doughnut").getContext("2d")).Pie(sharePiePolorDoughnutData, {
            responsive: true,
            tooltipFillColor: "rgba(51, 51, 51, 0.55)"
        });
    });

我试过这个，但它仍然不起作用：

<script>
    var charttotalsedaypic = document.getElementById("tbtotalsedaypic").value;
    var sharePiePolorDoughnutData = [
        {
            value: [charttotalsedaypic],
            color: "#455C73",
            highlight: "#34495E",
            label: "Si Day"
    },
        {
            value: 50,
            color: "#9B59B6",
            highlight: "#B370CF",
            label: "Si Night"
    },
        {
            value: 150,
            color: "#BDC3C7",
            highlight: "#CFD4D8",
            label: "Mi Day"
    }
];

    $(document).ready(function () {
        window.myPie = new Chart(document.getElementById("canvas_doughnut").getContext("2d")).Pie(sharePiePolorDoughnutData, {
            responsive: true,
            tooltipFillColor: "rgba(51, 51, 51, 0.55)"
        });
    });

有什么建议吗？

Answer 1

你能在onDeviceReady函数中移动两个变量声明吗？

<!DOCTYPE html>
<html>
<head>
   <title>Creating chart</title>
   <script src="jquery-1.11.3.min.js"></script>
   <script type = "text/javascript" src="Chart.js"> </script>
   <script>
        $(document).ready(function () {
           var charttotalsedaypic = document.getElementById("tbtotalsedaypic").value;

           var sharePiePolorDoughnutData = [
                                           {
                                              value: [charttotalsedaypic],
                                              color: "#455C73",
                                              highlight: "#34495E",
                                              label: "Si Day"
                                           },
                                           {
                                             value: 50,
                                             color: "#9B59B6",
                                             highlight: "#B370CF",
                                             label: "Si Night"
                                           },
                                           {
                                             value: 150,
                                             color: "#BDC3C7",
                                             highlight: "#CFD4D8",
                                             label: "Mi Day"
                                           }
                                         ];
  window.myPie = new Chart(document.getElementById("canvas_doughnut").getContext("2d")).Pie(sharePiePolorDoughnutData, {
      responsive: true,
      tooltipFillColor: "rgba(51, 51, 51, 0.55)"
  });
  });

  </script>
  </head>
  <body>
     <input type="text" value="11" id="tbtotalsedaypic"/>
     <canvas id="canvas_doughnut" height="450" width="600"></canvas>
   </body>
    </html>

由于未设置该值，因此值返回为null，这就是为什么不使用图表呈现它。

Answer 2

我找到了解决方案，我会在这里发布，以防将来遇到同样的问题。

事实证明我只需要使用parseFloat。所以改变的部分是：

var sharePiePolorDoughnutData = [
                                       {
                                          value: [charttotalsedaypic],
                                          color: "#455C73",
                                          highlight: "#34495E",
                                          label: "Si Day"
                                       },

我解析了变量，最终的代码是：

var sharePiePolorDoughnutData = [
{
  value: parseFloat(charttotalsedaypic),
  color: "#455C73",
  highlight: "#34495E",
  label: "Si Day"
},

如何在Charts.js饼图中使用变量数据？

2 个答案: