ChartJS不绘制图表

Question

其实我一直想对天使用ChartJS库从阿贾克斯将数据加载到图表，但问题是，在另一个DIV传说加载从阿贾克斯数据加载正确的，但在日线图呈像“隐形”的时候，画布是创建。

现在，我只是想从一个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之总是需要的标签。

Answer 2

传说是没有显示，您可以通过你的数据创建了自己的传奇。

ChartJS通常绘制它的<canvas>元素中自己的传奇。而选项中，你必须将其关闭，你没有能力。因此，没有传说，没有框架的图表所示。

无论如何;你可以用它来使用自己的传说和隐藏的框架的传奇

options: {
  legend: {
    display: false
  }
}

您的图表显示不出来，因为你的数据结构不适合由chartjs所需的数据结构。

请参阅：https://www.chartjs.org/docs/latest/charts/doughnut.html#data-structure

请记住，一个饼图/圆环做的比线/条形图的其它数据/标签结构