javascript - 如何创建 chartjs 条形图?
问题描述
以下代码应该创建一个新的条形图,但我得到一个“未捕获的类型错误:无法设置未定义的属性‘数据’”,它指向第一行(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 文件中的某处调用图表?
解决方案
为我工作。它必须只是顺序。
试试这个:
<!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>
推荐阅读
- javascript - 为什么这个反应数组在每次循环后都没有被覆盖?
- python - Python Multiprocessing JoinableQueue:清除队列并丢弃所有未完成的任务
- android - Android Hilt - 如何在片段之间共享依赖关系?
- r - 将一个刻面和一个未刻面的 ggplot2 组合在一起,确保面板的宽度相同
- python - 如何加载不在工作目录中的图像?
- ubuntu-18.04 - microsoft package - 跳过获取配置文件'main/binary-i386/Packages'
- python - 交叉熵损失,IndexError:目标 -1 超出范围
- firebase - 将 Firebase 添加到库中时,“使用 'Firebase' 构建 IPA 时没有此类模块”
- javascript - 如何通过在js中使用reduce返回数组中的对象来创建嵌套对象
- java - java.lang.ClassCastException: androidx.appcompat.widget.AppCompatImageView 不能转换为 android.widget.TextView