我试图删除条形图的偏移(偏移:false),但结果是第一个条形向左移动,因此只显示了第一个条形的一半。下面是我得到的结果,但没有显示阶梯图的开头和结尾。
function createBarChart() {
const ctx = document.getElementById('myChart');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['1', '2', '3', '4', '5', '6'],
datasets: [
{
type: 'line',
label: 'Dataset 1',
data: [18, 19, 16, 12, 13, 11],
borderColor: 'rgb(54, 162, 235)',
fill: false,
radius: 0,
stepped: 'middle',
// xAxisID: 'xStepChart'
},
{
type: 'bar',
label: 'Label 2',
data: [9.35, 8.35, 8.56, 6.46, 5.04, 3.15],
//-- No gaps between bars
barPercentage: 1.0,
categoryPercentage: 1.0,
backgroundColor: ['#71797E'],
borderColor: ['#000000'],
borderWidth: 1
},
{
type: 'bar',
label: 'Label 3',
data: [20.34, 17.31, 16.39, 13.48, 11.29, 11.23],
//-- No gaps between bars
barPercentage: 1.0,
categoryPercentage: 1.0,
backgroundColor: ['#A9A9A9'],
borderColor: ['#000000'],
borderWidth: 1
},
{
type: 'bar',
label: 'Label 4',
data: [20.40, 18.57, 16.96, 14.19, 12.68, 11.98],
//-- No gaps between bars
barPercentage: 1.0,
categoryPercentage: 1.0,
backgroundColor: ['rgba(46, 142, 201, 0.2)'],
borderColor: ['rgba(61, 61, 60, 1)'],
borderWidth: 1
},
]
},
options: {
scales: {
x: {
stacked: true,
},
y: {
stacked: false
}
}
}
})
}
1条答案
按热度按时间pieyvz9o1#
您可以将
'line'
data
定义为点数组(个别对象各有x
和y
属性)。然后将dataset
链接至第二个未显示的x轴。X轴为
'line'
dataset
...请看一下下面修改后的可运行代码,看看它是如何工作的。
第一个
如果您有更多的数据点,您可能还必须定义
x2.max
,以保持datasets
同步(显示下面的代码片段)。第一个