Meteor / React.js / Chart.js 问题

Question

我在 Meteor/React.js 应用程序上工作，我正在尝试将 Chart.js 功能添加到我的应用程序中。以下代码返回错误并且不起作用：

import Chart from 'chart.js';

    drawChart(){
            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
                            }
                        }]
                    }
                }
            });
        }

    render() {

           return (
                <div>
                     <canvas id="myChart" width="400" height="400"></canvas>

                     {this.drawChart()}

                 </div>
);
}

看起来 drawChart 函数无法通过 id "myChart" 获取元素并返回 "Uncaught TypeError: Cannot read property 'length' of null" 在我的示例中 null 是 ctx。

当我切换到 jQuery 并执行 $("myChart") 时，它会返回“无法创建图表：无法从给定项目获取上下文”。

然后我决定将 .getContext("2d") 添加到 $("myChart") 我得到 $("myChart").getContext("2d") 的地方，但它仍然不起作用。它返回“Uncaught TypeError: $(...).getContext is not a function”

请帮忙

Answer 1

你实际上已经纠正了你原来的方式，

var ctx = document.getElementById("myChart");

jquery 错误的原因是因为您遗漏了 # 符号（因为您正在处理一个 id，所以需要）。不过这样也行。

$("#myChart")

但是，我认为您仍然会收到错误消息。我认为问题在于您的画布元素实际上尚未渲染，因为您直接从渲染函数调用{this.drawChart()}。

我对react了解不多，但是渲染后可以调用这个函数吗？不过，我确实对 chart.js 了解很多，当 canvas 尚未在 dom 中但您尝试访问它时会弹出此错误。