Question

加载此图表时出现此错误：

未捕获的TypeError：n不是功能 at t.render（Chart.min.js：10） at Object.callback（Chart.min.js：10） at Object.advance（Chart.min.js：10） at Object.startDigest（Chart.min.js：10）在Chart.min.js：10

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>

<script>
    $(document).ready(function () {
        loadDonutChart();
    });

    function loadDonutChart() {
        var ctx = document.getElementById("MydonutChart").getContext("2d");
        var data = [{
            value: 30,
            color: "#F7464A"
        }, {
            value: 50,
            color: "#E2EAE9"
        }, {
            value: 100,
            color: "#D4CCC5"
        }, {
            value: 40,
            color: "#949FB1"
        }, {
            value: 120,
            color: "#4D5360"
        }];

        var options = {
            animation: true,
            animationEasing: 'easeInOutQuart',
            animationSteps: 80
        };
        var myPieChart = new Chart(ctx,
            {
                type: 'pie',
                backgroundColor: '#fcfcfc',
                data: data,
                options: options,
            });
    }
</script>

<canvas id="MydonutChart" height="700" width="100"></canvas>

Answer 1

这是因为，构建图表的方式不正确（Chart.js 1.x的 。

以下是在Chart.js 2.x中创建图表的正确/正确方法：

＆＃13;

$(document).ready(function() {
   loadDonutChart();
});

function loadDonutChart() {
   var ctx = document.getElementById("MydonutChart").getContext("2d");

   var data = {
      datasets: [{
         data: [30, 50, 100, 40, 120],
         backgroundColor: ["#F7464A", "#E2EAE9", "#D4CCC5", "#949FB1", "#4D5360"]
      }]
   };
   var options = {
      animation: {
         easing: 'easeInOutQuart',
         duration: 1000
      }
   };

   var myPieChart = new Chart(ctx, {
      type: 'pie',
      data: data,
      options: options
   });
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<canvas id="MydonutChart"></canvas>

＆＃13;

Answer 2

首先，您的数据变量是错误的。在文档中，我没有找到任何可以使用对象数组的信息。数据必须是一个对象！

这是你的，这是错的：

var data = [{
            value: 30,
            color: "#F7464A"
        }, {
            value: 50,
            color: "#E2EAE9"
        }, {
            value: 100,
            color: "#D4CCC5"
        }, {
            value: 40,
            color: "#949FB1"
        }, {
            value: 120,
            color: "#4D5360"
        }];

或许看一下这个例子：http://www.chartjs.org/docs/latest/getting-started/usage.html

饼图未在ChartJS中呈现

2 个答案: