gpt4 book ai didi

javascript - 单点曲线Chart.js

转载 作者:太空宇宙 更新时间:2023-11-04 15:27:59 25 4
gpt4 key购买 nike

有没有办法在 Chart.js 中创建带有单个点的直线曲线,如下所示?

Picture of what I'm trying to create

我尝试了一些 hacky 修复,例如添加两个额外的点:在 y: 0 处向右添加 1 个点,使曲线的右侧部分向下,然后在 x: 0 处向上添加另一个点,使曲线的右侧部分向下移动。曲线如图所示。它并没有真正起作用,曲线看起来很糟糕并且点显示。

我还尝试将它们放在图形显示区域之外,使用最小值和最大值来保持图形在任一轴上仅可见到 9,但点仍然显示在轴上。

这是我当前拥有的无法运行版本的屏幕截图:

Not working version that I currently have

这是我的图形配置代码。我在 Angular 2/Ionic 3 中使用它:

this.data = {
xLabels: [0,1,2,3,4,5,6,7,8,9, ''],
yLabels: [0,1,2,3,4,5,6,7,8,9, ''],
datasets: [{
label: '',
data: [{x:-5, y: 7}, this.coords, {x: 9, y: 0}],
pointBackgroundColor: '#ffffff',
borderColor: '#ffffff',
pointStyle: 'rectRot',
pointRadius: 8,
}]
};

this.options = {
responsive: true,
maintainAspectRatio: false,
legend: {
display: false,
},
layout: {
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0
}
},
scales: {
yAxes: [{
position: 'left',
ticks: {
fontSize: 14,
fontColor: '#a6a08f',
fontFamily: 'Helvetica',
fontStyle: 'bold',
beginAtZero: true,
min: 0,
max: 10,
stepSize: 1
},
gridLines: {
color: '#a6a08f',
drawTicks: true
}
}],
xAxes: [{
ticks: {
fontSize: 14,
fontColor: '#a6a08f',
fontFamily: 'Helvetica',
fontStyle: 'bold',
beginAtZero: true,
min: 0,
max: 10,
},
gridLines: {
display: true,
color: '#a6a08f',
zeroLineColor: '#a6a08f',
drawTicks: true
}
}]
}
}

最佳答案

我的处理方式是错误的。需要三个点才能形成一条曲线。我只想显示线上的一个点,但需要第一个和第三个点来获取曲线。

关于javascript - 单点曲线Chart.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45063825/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com