Question

如何创建 chartjs 条形图？

2018-12-18

187

javascript chart.js

以下代码应该创建一个新的条形图，但我收到“未捕获类型错误：无法设置未定义的属性‘数据’”，它指向第一行（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 标签，我将避免提及放置页面就绪的侦听器，并建议将其放在最后以方便您使用。