我正在ChartJS上绘制堆叠的水平条形图,并希望在第二x轴上基于数值放置点。
if (barChartBox) {
const barCtx = barChartBox.getContext('2d');
new Chart(barCtx, {
type: 'horizontalBar',
data: {
yLabels: ['Income'],
datasets: [{
label : 'Realised',
backgroundColor : COLORS['teal-500'],
borderColor : COLORS['teal-800'],
borderWidth : 1,
data : [5255],
}, {
label : 'Planned',
backgroundColor : COLORS['amber-500'],
borderColor : COLORS['amber-800'],
borderWidth : 1,
data : [1052],
}, {
label : 'Potential',
backgroundColor : COLORS['grey-500'],
borderColor : COLORS['grey-800'],
borderWidth : 1,
data : [2060],
}, {
label : 'Target',
type : 'line',
backgroundColor : COLORS['red-500'],
borderColor : COLORS['red-800'],
fill : false,
showLine : false,
data : [{x: 6361, y:1}],
xAxisID : 'secondary-axis'
}]
},
options: {
responsive: true,
legend: {
position: 'bottom',
},
scales: {
xAxes: [{
stacked: true,
ticks: {
callback: function(value, index, values) {
return value.toLocaleString();
}
}
}, {
id: 'secondary-axis',
display: false
}],
yAxes: [{
stacked: true,
ticks: {
beginAtZero: true,
max: 1
}
}]
},
title: {
display: true,
text: 'Amounts in SGD \'000'[![enter image description here][1]][1]
},
},
});
}
我已经尝试了一些变体/排列,但是不确定这里出了什么问题。该点没有显示出来。
我在这里做什么错了?