Question

我正在尝试在Altervista ftp的.html文件中创建图形。这是我的代码：

<canvas id="myChart" width="400" height="200"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js" />
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                ...
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                ...
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
</script>

为什么我的画布上什么都没有？控制台也不会显示错误。

Answer 1

您应删除...和backgroundColor下的borderColor或根据标签数添加颜色。

Answer 2

初始化图表后，您需要调用myChart.update（）。

Answer 3

我解决了从此编辑第一个脚本的错误：

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js" />

对此：

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js" ></script>

由@ j.ian.le建议

并添加

responsive: false,

在options: {下

Chart.js在画布上不显示任何内容

3 个答案: