Chart.js对于混合图(阶梯图和条形图),如何让每个阶梯从条形图的开始处开始,而不是从堆叠条形图的中间开始?

zour9fqk  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(259)

我试图删除条形图的偏移(偏移: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
                    }   
                }
            }
        })
    }

enter image description here

pieyvz9o

pieyvz9o1#

您可以将'line'data定义为点数组(个别对象各有xy属性)。然后将dataset链接至第二个未显示的x轴。

{
  type: 'line',
  label: 'Dataset 1',
  data: [{x: 0, y: 18}, {x: 1, y: 19}, {x: 2, y: 16}, {x: 3, y: 12}, {x: 4, y: 13}, {x: 5, y: 11}, {x: 6, y: 11}],
  ...
  stepped: 'end',
  xAxisID: 'x2'
},

X轴为'line'dataset ...

x2: {
  type: 'linear',
  display: false        
}

请看一下下面修改后的可运行代码,看看它是如何工作的。
第一个
如果您有更多的数据点,您可能还必须定义x2.max,以保持datasets同步(显示下面的代码片段)。
第一个

相关问题