Javascript ChartJS不'；不要画图表

事实上，我已经尝试了好几天使用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>

$（函数（）{
负荷图（）；
});
函数负载图（）{
$（“#dvChart”）.html（“”）；
$（“#dvLegend”）.html（“”）；
//填充图表的数据
var=新数组（）；
var mango={}；
mango.text=“mango”；
芒果价值=20；
mango.color=“#FEBD01”；
水果。推（芒果）；
var orange={}；
orange.text=“橙色”；
橙色。数值=40；
橙色.color=“#FF8C00”；
水果。推（橙色）；
var peach={}；
peach.text=“peach”；
peach.value=55；
peach.color=“#FFCBA6”；
水果。推（桃）；
var el=document.createElement（'canvas'）；
$（“#dvChart”）[0].appendChild（el）；
var ctx=el.getContext（'2d'）；
var图表=新图表（ctx{
键入“pie”，
数据：水果
});
对于（变量i=0；i

您可以尝试以下方法：

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总是需要标签。

您可以尝试以下方法：

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总是需要标签。

图例没有显示，您根据自己拥有的数据创建了自己的图例

ChartJS通常在

元素中绘制自己的图例。在这些选项中，你可以关闭它们，但你没有。因此，没有显示框架的图例和图表

无论如何；您可以使用它来使用自己的图例并隐藏框架的图例

options: {
  legend: {
    display: false
  }
}

您的图表不会显示，因为您的数据结构不符合chartjs所需的数据结构

见：

---

请记住，饼图/油炸圈饼图除了线条图/条形图之外，还有其他数据/标签结构

图例未显示，您根据所拥有的数据创建了自己的图例

ChartJS通常在

元素中绘制自己的图例。在这些选项中，你可以关闭它们，但你没有。因此，没有显示框架的图例和图表

无论如何；您可以使用它来使用自己的图例并隐藏框架的图例

options: {
  legend: {
    display: false
  }
}

您的图表不会显示，因为您的数据结构不符合chartjs所需的数据结构

见：

---

请记住，饼图/甜甜圈除了线条图/条形图之外，还有其他数据/标签结构

请创建一个fiddle@Vel请创建一个fiddle@Vel