Html Chart.js br仅显示第一个值的图表_Html_Chart.js

Html Chart.js br仅显示第一个值的图表

html chart.js

Html Chart.js br仅显示第一个值的图表,html,chart.js,Html,Chart.js,我已经在html文件中创建了一个网页。我使用了chart.js插件来显示条形图。但是，图表中仅显示数组的第一个值。这是我的index.html <!DOCTYPE HTML> <html><head> <meta charset="utf-8" /> <title>Hello</title> <script src="/Chart.js" type="t

我已经在html文件中创建了一个网页。我使用了chart.js插件来显示条形图。但是，图表中仅显示数组的第一个值。这是我的index.html

         <!DOCTYPE HTML>

        <html><head>
    <meta charset="utf-8" />
    <title>Hello</title>
    <script src="/Chart.js" type="text/javascript"></script>
</head> 

<body>

      <h1>Battery Levels</h1>
    <div>
        <canvas id="myChart1" width="800" height="450"></canvas>
    </div>
    <script>
        var batlevels = {
            datasets: [{
                data: [20, 40, 10, 30, 50],
                backgroundColor: [
                "#FF6384",
                "#63FF84",
                "#84FF63",
                "#8463FF",
                "#6384FF"
                ]
            }]
        };

        // Get the context of the canvas element we want to select
        var chart1 = document.getElementById("myChart1").getContext("2d");
        new Chart(chart1, {
            type: 'bar',
            data: batlevels
        });
    </script>
</body>

</html>


你好
电池电量
风险等级={
数据集：[{
数据：[20,40,10,30,50]，
背景颜色：[
“#FF6384”，
“#63FF84”，
“"84FF63”，
“#8463FF”，
“#6384FF”
]
}]
};
//获取要选择的画布元素的上下文
var chart1=document.getElementById（“myChart1”）.getContext（“2d”）；
新图表（图表1{
类型：'bar'，
数据：蝙蝠级别
});

有什么想法吗？

确保

数据

元素包含

标签

定义

var-batlevels={
标签：[一月、二月、三月、四月、五月]，
数据集：[{
标签：“我的数据集”，
数据：[20,40,10,30,50]，
背景颜色：['#FF6384'、'#63FF84'、'#84FF63'、'#8463FF'、'#6384FF']
}]
};
新图表（document.getElementById（“myChart1”）{
类型：'bar'，
数据：蝙蝠级别，
选项：{
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
}
}]
}
}
});