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”获取元素并返回“未捕获的TypeError：无法读取null的属性'长度”，其中null是我示例中的ctx。

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

然后我决定将.getContext（“2d”）添加到$（“myChart”），其中我得到了$（“myChart”）。getContext（“2d”）并且它仍然不起作用。它返回“Uncaught TypeError：$（...）。getContext不是函数”

请帮忙

Answer 1

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

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

jquery错误的原因是因为你没有＃符号（因为你正在处理一个id所需）。这会有用。

$("#myChart")

但是，我认为你仍然会收到错误。我认为问题是你的canvas元素实际上还没有渲染，因为你直接从渲染函数调用{this.drawChart()}。

我不太了解反应，但你可以在渲染后调用此函数吗？然而，我对chart.js了解很多，当画布尚未在dom中但你试图访问它时会弹出这个错误。

Meteor / React.js / Chart.js问题

1 个答案: