javascript - ChartJS 不绘制图表

Question

实际上，我已经尝试了好几天使用 ChartJS 库将 ajax 数据加载到图表中，但问题是另一个 div 中的图例已加载，来自 ajax 的数据加载正确，但图表就像“不可见”一样 Canvas 已创建。

现在我只是想用 json 数组中的静态数据创建一个简单的图表但我仍然遇到同样的问题，显示了图例，但没有显示图表。

问题可能应该是在类型中我得到“类型未定义”？如果是这样我该如何解决？

我会附加两个屏幕，一个来自数组的调试，另一个来自类型值

这是 JQuery 代码

<!--   Core JS Files   -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js" type="text/javascript"></script>
<script src="/assets/js/core/jquery.3.2.1.min.js" type="text/javascript"></script>
<script src="/assets/js/core/popper.min.js" type="text/javascript"></script>
<script src="/assets/js/core/bootstrap.min.js" type="text/javascript"></script>
<script src="/assets/js/light-bootstrap-dashboard.js?v=2.0.1" type="text/javascript"></script>
<script src="../assets/js/gabservizi.js"></script>
<script>
 $(function () {
        LoadChart();
    });
    function LoadChart() {
        $("#dvChart").html("");
        $("#dvLegend").html("");

        //Populate data for the chart
        var fruits = new Array();

        var mango = {};
        mango.text = "Mango";
        mango.value = 20;
        mango.color = "#FEBD01";
        fruits.push(mango);

        var orange = {};
        orange.text = "Orange";
        orange.value = 40;
        orange.color = "#FF8C00";
        fruits.push(orange);

        var peach = {};
        peach.text = "Peach";
        peach.value = 55;
        peach.color = "#FFCBA6";
        fruits.push(peach);

        var el = document.createElement('canvas');
        $("#dvChart")[0].appendChild(el);

        var ctx = el.getContext('2d');
        var chart = new Chart(ctx, {
            type: 'pie',
            data: fruits
        });

        for (var i = 0; i < fruits.length; i++) {
            var div = $("<div />");
            div.css("margin-bottom", "10px");
            div.html("<span style = 'display:inline-block;height:10px;width:10px;background-color:" + fruits[i].color + "'></span> " + fruits[i].text);
            $("#dvLegend").append(div);
        }
    }

</script>

Answer 1

你可以试试这个:

fruits.push(peach);

chart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: fruits.map(f => f.text),
        datasets: [{ 
            data: fruits.map(f => f.value),
            backgroundColor: fruits.map(f => f.color)
        }]
    }
});

据我所知，Chart.js 始终需要标签。