Question

实际上，我已经尝试了数天，使用ChartJS库将ajax中的数据加载到图表中，但是问题是另一个div中的图例已加载，而ajax中的数据已正确加载，但当画布已创建。

现在我只是想用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

请记住，饼图/甜甜圈确实具有不同于折线/条形图的其他数据/标签结构

ChartJS不会绘制图表

2 个答案: