chart.js 无法创建图表:无法从给定项目获取上下文

2022-01-22 00:00:00 node.js javascript chart.js

我从来没有进入过节点，所以我很确定我在这里做错了什么，因为我通过谷歌搜索根本找不到任何信息.

I never got into node so I am pretty sure I am doing something massively wrong here since I cannot find any info at all by googling.

我有一个 django 网站，我想要一个 JS 图表库，我选择了 chart.js.

I have a django site and I wanted a JS charting library, I chose chart.js.

我安装并喜欢文档，但之后我不确定该怎么做，所以我尝试填写空白并尽可能遵循他们的指南.这是我的 html 的样子....

I installed and like the docs, but after that I am unsure of what to do so I tried to fill in the blanks and follow their guide as much as possible. Here is what my html looks like....

<script src="/public/node_modules/chart.js/dist/Chart.js"></script>

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

<script>    
    var ctx = document.getElementById("myChart");
    console.log(ctx);

    var options = {}

    var data = {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [
            {
                label: "My First dataset",
                fill: false,
                lineTension: 0.1,
                backgroundColor: "rgba(75,192,192,0.4)",
                borderColor: "rgba(75,192,192,1)",
                borderCapStyle: 'butt',
                borderDash: [],
                borderDashOffset: 0.0,
                borderJoinStyle: 'miter',
                pointBorderColor: "rgba(75,192,192,1)",
                pointBackgroundColor: "#fff",
                pointBorderWidth: 1,
                pointHoverRadius: 5,
                pointHoverBackgroundColor: "rgba(75,192,192,1)",
                pointHoverBorderColor: "rgba(220,220,220,1)",
                pointHoverBorderWidth: 2,
                pointRadius: 1,
                pointHitRadius: 10,
                data: [65, 59, 80, 81, 56, 55, 40],
                spanGaps: false,
            }
        ]
    };

    var myChart = new Chart({
        type: 'line',
        data: data,
        options: options
    })
</script>

我只是想让一个例子工作.我将通过 npm 下载的 node_modules 目录放在我的服务器将为它们提供服务的某个地方......并验证它们正在被提供服务，但是当我尝试构建图表时出现此错误.我从他们的文档中获取了所有图表代码，所以我很确定那部分是正确的，但我不明白为什么会出现这个错误.

I am just trying to get an example working. I put the node_modules directory that was downloaded via npm somewhere where my server would serve them up....and verified they are being served, but then I get this error when I try to build a chart. I took all the chart codes from their docs so I am pretty sure that part is right, but I can't see why I am getting this error.

推荐答案

调用构造函数时没有传递画布的 2d 上下文 (ctx).来自文档:

You are not passing the 2d context of the canvas (ctx) when calling the constructor. From the documentation:

要创建图表，我们需要实例化 Chart 类.去做这个，我们需要传入节点、jQuery 实例或 2d 上下文我们要绘制图表的画布.

To create a chart, we need to instantiate the Chart class. To do this, we need to pass in the node, jQuery instance, or 2d context of the canvas of where we want to draw the chart.

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

可以使用以下任何格式:

Any of the following formats may be used:

var ctx = document.getElementById('myChart'); // node
var ctx = document.getElementById('myChart').getContext('2d'); // 2d context
var ctx = $('#myChart'); // jQuery instance
var ctx = 'myChart'; // element id

var myChart = new Chart(ctx, {
  type: 'line',
  data: {/* Data here */},
  options: {/* Options here */}
}

相关文章