Question

下面的代码应该创建一个新的条形图，但是我遇到一个“未捕获的TypeError：无法设置未定义的属性'data'”，它指向第一行（var chart = new Chart等）

var chart = new Chart(document.getElementById("chart1"), {
            type: 'bar',
            data: {
                labels: ["Label1", "Label2", "Label3", "Label4"],
                datasets: [{
                    label: "Num incidents",
                    backgroundColor: 'rgba(54, 162, 235, 0.2)',
                    data: [89,57,25,28]
                }],
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        })

我有一个包含以下内容的html文件：

<head>
<meta charset="utf-8"/>
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"> 
</script>
</head>

<div class="column">
  <canvas id="chart1"></canvas>
</div>

我是否还需要在js文件中包含chartjs api？
还是我需要在我的js文件中的某个地方调用图表？

Answer 1

为我工作。一定是命令。

尝试一下：

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js" type="application/javascript"></script>
    </head>
    <body>
        <div class="column">
          <canvas id="chart1"></canvas>
        </div>
        <script type="application/javascript">
            var chart = new Chart(document.getElementById("chart1"), {
                type: 'bar',
                data: {
                    labels: ["Label1", "Label2", "Label3", "Label4"],
                    datasets: [{
                        label: "Num incidents",
                        backgroundColor: 'rgba(54, 162, 235, 0.2)',
                        data: [89,57,25,28]
                    }],
                },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true
                            }
                        }]
                    }
                }
            });
        </script>
    </body>
</html>

或在此处播放：https://jsfiddle.net/2d9kfegj/2/

Answer 2

在您的html文件中：

<script src="myJavascript.js"> </script>

问题是您没有在html中包含js文件。确保在html末尾包含js文件，例如：

  <head>
    <meta charset="utf-8"/>
    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js">
    </script>

</head>

<div class="column">
    <canvas id="chart1"></canvas>
</div>

<script src="myJavascript.js"></script>

之后，它将正常工作。您需要先加载页面，以便您的JS知道将创建的图表放在哪里。

在jquery中，您可以使用document.ready函数，但是由于您没有jquery标签，因此我会避免提及为页面准备就绪的侦听器，并建议为方便起见将其放在最后。

如何创建chartjs条形图？

2 个答案: