chart.js无法创建图表：无法从给定项目获取上下文 [英] chart.js Failed to create chart: can't acquire context from the given item

问题描述

我从来没有进入节点所以我很确定我在这里做了大量错误的事情，因为我通过谷歌搜索找不到任何信息。

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.

推荐答案

调用构造函数时，你没有传递上下文（ ctx ）。

这是创建一个正确的方法新图表：

You are not passing the context (ctx) when calling the constructor.
This would be the correct way to create a new chart:

 <canvas id="myChart"></canvas>

 var ctx = document.getElementById("myChart");
 var myChart = new Chart(ctx,{
        type: 'line',
        data: data,
        options: options
    })

这篇关于chart.js无法创建图表：无法从给定项目获取上下文的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！