javascript - 如何在 chart.js 中制作曲线条形图或曲线柱形图?
解决方案
您可以使用line
如下代码示例中所示的图表来执行此操作,需要进一步改进以获得您期望的结果。
new Chart(document.getElementById('myChart'), {
type: 'line',
data: {
labels: [1, 2, 3, 4, 5, 6, 7],
datasets: [
{
data: [0, 5, 0, 0, 0, 0, 0],
fill: true,
backgroundColor: 'rgb(255, 0, 0, 0.7)',
backgroundColor: 'rgb(255, 0, 0, 0.7)',
lineTension: 0.4,
pointHitRadius: 0
},
{
data: [0, 0, 9, 0, 0, 0, 0],
fill: true,
backgroundColor: 'rgb(255,165,0, 0.7)',
backgroundColor: 'rgb(255,165,0, 0.7)',
lineTension: 0.6,
pointHitRadius: 0
},
{
data: [0, 0, 0, 6, 0, 0, 0],
fill: true,
backgroundColor: 'rgb(255, 215, 0, 0.7)',
backgroundColor: 'rgb(255, 215, 0, 0.7)',
lineTension: 0.6,
pointHitRadius: 0
},
{
data: [0, 0, 0, 0, 5, 0, 0],
fill: true,
backgroundColor: 'rgb(59, 161, 151, 0.7)',
backgroundColor: 'rgb(59, 161, 151, 0.7)',
lineTension: 0.6,
pointHitRadius: 0
},
{
data: [0, 0, 0, 0, 0, 4, 0],
fill: true,
backgroundColor: 'rgb(100, 100, 100, 0.7)',
backgroundColor: 'rgb(100, 100, 100, 0.7)',
lineTension: 0.4,
pointHitRadius: 0
}
]
},
options: {
responsive: true,
elements: {
point:{
radius: 0
}
},
title: {
display: false,
},
legend: {
display: false
},
tooltips: {
display: false
},
scales: {
yAxes: [{
ticks: {
display: false
},
gridLines: {
display: false
}
}],
xAxes: [{
ticks: {
display: false
},
gridLines: {
display: false
}
}],
}
}
});
canvas {
max-width: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="200"></canvas>
推荐阅读
- java - jaxb 将 xml 元素解组为具有某些字段的对象
- c++ - C++虚函数:调用基类函数而不是派生函数
- excel - CopyFromRecordset 上的自动化错误
- vbscript - 仅在一个脚本中将文件添加到 HKEY_CURRENT_USER 自动运行和 HKEY_LOCAL_MACHINE
- java - 如何更改 JLabel 和 JTextfield 的大小?
- vba - Outlook 2016 - 规则向导中的“选择脚本”窗口为空白
- java - ByteBuddy 的 MemberSubstitution 类的使用
- git - git filter-branch 后跟 git push 导致双重提交
- charts - 谷歌图表甘特图避免工具提示
- android - CardStackView 添加带有数据库信息的点