javascript - 如何使用 chartjs 创建浮动图表?
问题描述
我尝试使用 chartjs 创建浮动图表,但它似乎不起作用。我尝试复制与http://pravopys.net/chartjs/samples/charts/bar/vertical.html相同的示例,但我的根本不渲染或抛出任何错误。
var myBarChart = new Chart(document.getElementById("bar-chart"), {
type: 'bar',
data: {
labels: ['January', 'February', 'March'],
datasets: [
{
label: "Population (millions)",
data: [
[-2, 5],
[-20, 70],
[30, 80]
],
backgroundColor: "rgba(75, 192, 192, 0.2)",
borderColor: "rgba(75, 192, 192, 1)",
borderWidth: 1,
fill: false,
lineTension: 0,
type: "bar"
}
]
},
options: {
legend: { display: false },
title: {
display: true,
text: 'Predicted world population (millions) in 2050'
}
}
});
不知道我在这里做错了什么。该示例显示了我正在使用的数据集的数据结构。任何帮助是极大的赞赏。
Plunker 链接:http ://www.plnkr.co/edit/bD1MgVvjuq7B4RM5Qcmh?p=preview
解决方案
您需要一个 2d 上下文来绘制图表。这是一个工作示例:
在您的代码中执行以下 2 项更改:
HTML
<canvas id="bar-chart" width="400" height="400"></canvas>
Javascript
var ctx = document.getElementById("bar-chart").getContext("2d");
var myBarChart = new Chart(ctx, ...)
资料来源: https ://www.chartjs.org/docs/latest/#creating-a-chart
推荐阅读
- css - CSS:画布大小不正确且不会分层
- r - 如何制作类似的情节?[R]
- fontforge - 如何在我的 True type 字体中添加更多字形?
- c# - EF Core 5 DTO 映射规则和常规 CRUD 操作
- python - 删除与 Panda 中两个电子表格之间的某些列匹配的行
- reactjs - React.js - 使用不同设置多次使用一个组件
- reactjs - 在一个按钮组件中使用不同的 onClick 事件的问题
- excel - 检查 Excel 中不同列的多个值
- java - Nvidia Triton tensorflow 字符串参数
- javascript - 正则表达式模式 a 然后 b 然后 a,一次或多次