Chart.js折线图看起来像面积图，具有平滑的线条但不清晰
Chart.js折线图看起来像面积图，具有平滑的线条但不清晰
提问于 2020-12-28 17:35:16
chartjs折线图的显示方式类似于面积图，线条流畅。我想把这个图表做成一个带有锐点的简单折线图。我已经尝试了一些选择，但都是徒劳的。
var AreaChart = new Chart(AreaCharts, {
type: 'line',
data: {
labels: [],
datasets: [{
label: 'Required',
data: [],
backgroundColor: '#f39233',
hoverBorderWidth: 2,
hoverBorderColor: '#054564',
},
{
label: '2nd',
data: [],
backgroundColor: '#b8de6f',
hoverBorderWidth: 2,
hoverBorderColor: '#054564',
}
]
},
options: {
bezierCurve: false,
scaleShowValues: true,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
ticks: {
autoSkip: true,
padding: 10,
fontSize: 10
}
}]
},
responsive: true,
maintainAspectRatio: false,
title: {
display: true,
text: ''
},
},
});这就是代码。我正在填充来自其他函数的数据和标签。线条应该是清晰的，应该只有一条线，而不是任何区域。我确实阅读了文档，但它让我感到困惑。
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-12-28 17:54:19
我在这里发布了一个解决方案：http://jsfiddle.net/srux4971/
最重要的部分是
data: {
...
datasets: [{
...
fill: false, //no fill
lineTension:0, //straight linesStack Overflow用户
发布于 2020-12-28 17:44:19
要将面积图转换为折线图，请将选项fill: false添加到每个数据集。
如果您还定义了选项borderColor，线条将以所需的颜色显示。
请看一下您修改后的代码，看看它是如何工作的。
new Chart('myChart', {
type: 'line',
data: {
labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
datasets: [{
label: 'Required',
data: [3, 2, 4, 5, 6, 4, 3],
backgroundColor: '#f39233',
borderColor: '#f39233',
hoverBorderWidth: 2,
hoverBorderColor: '#054564',
fill: false
},
{
label: '2nd',
data: [4, 1, 3, 5, 3, 4, 2],
backgroundColor: '#b8de6f',
borderColor: '#b8de6f',
hoverBorderWidth: 2,
hoverBorderColor: '#054564',
fill: false
}
]
},
options: {
bezierCurve: false,
scaleShowValues: true,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
ticks: {
autoSkip: true,
padding: 10,
fontSize: 10
}
}]
},
responsive: true,
maintainAspectRatio: false,
title: {
display: true,
text: ''
}
},
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="200"></canvas>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65475567
复制相关文章
相似问题
腾讯云开发者
