createLineChart() {
this.lineChartEl = new Chart(this.lineCanvas.nativeElement, {
type: 'line',
data: {
labels: [10, 11, 17, 18, 19, 23],
datasets: [
{
fill: true,
backgroundColor: '#C4CEE5',
label: 'recorded values',
borderColor: '#C4CEE5',
pointBorderColor: '#ffff',
pointBackgroundColor: '#ffff',
hoverBackgroundColor: '#C4CEE5',
pointRadius: 7,
borderCapStyle: 'square',
borderJoinStyle: 'round',
borderWidth: 1.5,
lineTension: 0,
data: [23, 34, 45, 12, 45, 65],
borderDash: [],
borderDashOffset: 0.0,
spanGaps: false,
}]
},
options : {
legend: {
display: false,
position: 'top',
fullWidth: true,
},
scaleOverride: true,
scaleSteps: 10,
scaleStepWidth: 20,
scaleStartValue: 0,
scales: {
yAxes: [{
ticks: {
suggestMax: max,
maxTicksLimit: 4,
beginAtZero: true,
padding: 30
},
}],
xAxes: [{
ticks: {
min: 0,
maxTicksLimit: 5,
autoSkip: false,
beginAtZero: true,
},
time: {
unit: 'day',
unitStepSize: 1,
displayFormats: {
day: 'MMM D'
},
},
gridLines : {
display : false,
drawBorder: false,
color: 'transparent',
},
}]
},
},
});
};
我创建了一个chart.js折线图,其中x轴上的值是日期。我认为默认情况下,无论数据的值如何,chart.js都会绘制点之间距离相等的数据。
我希望如果日期更远,图表中有一个很大的空间。
我已经尝试使用chart-scatter插件来获取chart.js,但由于我使用离子/角度而没有太多运气,但如果你有任何经验,那就太棒了!
根据x轴值,我希望图表具有更多空间: