Question

我有这个简单的HTML：

<canvas id="myChart" width="400" height="400"></canvas>

和这个js：

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)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });

即使画布配置了myChart id，我也会收到以下错误：

Uncaught TypeError: Cannot read property 'offsetWidth' of undefined

的jsfiddle： https://jsfiddle.net/kroejrhx/

Answer 1

重新审视问题之后，这是您的问题：您使用的是chart.js的错误版本。根据{{3}}，如果您想使用基于时间的轴，则需要明确包含moment.js，或使用捆绑版本。

将jsfiddle中的资源更改为https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js将显示预期的图表。无需更改代码。

Answer 2

如果您想使用Chart.js v2.0，那么此CDN将起作用。

https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.min.js

Answer 3

您必须使用chart.js的版本2。如果您使用的是npm，请在package.json中，更新chart.js，例如 "chart.js": "^2.1.1", 。如果您使用react-chartjs-2，则仍需要确保chart.js的版本为2或更大。

Answer 4

使用此命令：var ctx = document.getElementById("myChart").getContext("2d");

代替：var ctx = document.getElementById("myChart");

未捕获的TypeError：无法读取属性＆＃39; offsetWidth＆＃39; of undefined - chart.js

4 个答案: