Chart. js-y轴折线图上的折线错位

bz4sfanl  于 2022-12-13  发布在  Chart.js
关注(0)|答案(2)|浏览(189)

我有一个包含条形和折线的图表。折线数据正确,但似乎聚合了折线值 放置折线图时在同一类别中出现了问题。我以为是因为y轴stacked=true,但我无法将此属性设置为false。由于条形图的原因,y轴必须stacked=true。如何解决此问题?

const barData = {

                labels: lblList,
                datasets: [
                {
                    label: 'GP Hedef',
                    backgroundColor: 'rgb(12,0,0)',
                    type: 'line',
                    borderDash: [10],
                    data: mList,
                    fill: false,
                    borderWidth: 2,
                    borderColor: 'rgb(12,0,0)',
                    spanGaps: true,
                    fullWidth: false
                },

                {
                    label: 'MOM Hedef',
                    backgroundColor: 'rgba(122, 17, 17, 1)',
                    type: 'line',
                    borderDash: [10],
                    data: hList,
                    fill: false,
                    borderWidth: 2,
                    borderColor: 'rgba(122, 17, 17, 1)',
                    spanGaps: true,
                    fullWidth: false

                },

                {
                    categoryPercentage:0.2, 
                    data: gList,
                    backgroundColor: cGList,
                    maxBarThickness: 12,
                    borderWidth: 1,
                    label: 'GP',
                    stack: 1
                },

                {
                    label: 'Process',
                    data: pList,
                    backgroundColor: cPList,
                    borderWidth: 1,
                    maxBarThickness: 25,
                    stack:2
                },

                {

                    label: 'Waiting',
                    data: wList,
                    backgroundColor: cWList,
                    borderWidth: 1,
                    maxBarThickness: 25,
                    stack:2

                },

                {
                    data: tList 
                }
 
                ]
            }

            new Chart(ctx0, {
                type: 'bar',
                data: barData,
                options: {

                    tooltips: {
                        displayColors: false,
                        backgroundColor: 'rgb(150, 50, 0)',
                        titleFontColor: 'rgb(255, 255, 255)',
                        bodyFontColor: 'rgb(255, 255, 255)',
                        callbacks: {
                            title: function (tooltipItem, data) {
                                return;
                            },
                            label: function (tooltipItem, data) {
                                const label = data.datasets[tooltipItem.datasetIndex].label;
                                const cycle = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                                return label + ': ' + cycle + ' sn';
                            }
                        }
                    },
                    legend: {
                        display: false
                    },
                    title: {
                        display: true,
                        text: 'İstasyon Çevrim Süreleri',
                        fontSize: 20
                    },
                    scales: {
                        xAxes: [{
                            stacked: true
                        }],
                        yAxes: [{
                            stacked: true
                        }]
                    }

                }
            });

enter image description here
在这种情况下,黑线正确地放置在y轴上,但另一条线必须放置在y轴上的23处。看起来像棕色线放置在y轴上的41处,即23+18。
我需要将棕色线放置在23中(当然在这种情况下,位置会根据数据的内容而改变)。

roqulrg3

roqulrg31#

这是因为您堆叠了Y轴,所以数据堆叠在其他数据的顶部,从而按照您所注意到的那样添加。要获得您想要的行为,您需要删除配置的这一部分:

yAxes: [{ stacked: true }]
lsmepo6l

lsmepo6l2#

我解决了这个问题,方法是为我希望在y轴堆叠的条形图提供堆叠ID(不要为我不希望堆叠的折线图给予ID),并删除“yAxes:[{堆叠:false}]“。以下是代码:

const barData = {
                labels: lblList,
                datasets: [

                {
                    label: '',
                    backgroundColor: color,
                    type: 'line',
                    borderDash: [10],
                    data: lList,
                    fill: false,
                    borderWidth: 2,
                    borderColor: color,
                    spanGaps: true,
                    fullWidth: false
                },
                {
                    label: 'GP Hedef',
                    backgroundColor: 'rgb(12,0,0)',
                    type: 'line',
                    borderDash: [10],
                    data: mList,
                    fill: false,
                    borderWidth: 2,
                    borderColor: 'rgb(12,0,0)',
                    spanGaps: true,
                    fullWidth: false
                },

                {
                    label: 'MOM Hedef',
                    backgroundColor: 'rgba(122, 17, 17, 1)',
                    type: 'line',
                    borderDash: [10],
                    data: hList,
                    fill: false,
                    borderWidth: 2,
                    borderColor: 'rgba(122, 17, 17, 1)',
                    spanGaps: true,
                    fullWidth: false
                },

                {
                    categoryPercentage:0.2, 
                    data: gList,
                    backgroundColor: cGList,
                    maxBarThickness: 12,
                    borderWidth: 1,
                    label: 'GP',
                    stack: 'stack 1'
                },

                {
                    label: 'Process',
                    data: pList,
                    backgroundColor: cPList,
                    borderWidth: 1,
                    maxBarThickness: 25,
                    stack:'stack 2'
                },

                {

                    label: 'Waiting',
                    data: wList,
                    backgroundColor: cWList,
                    borderWidth: 1,
                    maxBarThickness: 25,
                    stack:'stack 2'

                },

                {
                    data: tList 
                }
                ]}

            new Chart(ctx0, {

                type: 'bar',
                data: barData,
                options: {

                    tooltips: {
                        displayColors: false,
                        backgroundColor: 'rgb(150, 50, 0)',
                        titleFontColor: 'rgb(255, 255, 255)',
                        bodyFontColor: 'rgb(255, 255, 255)',
                        callbacks: {
                            title: function (tooltipItem, data) {
                                return;
                            },
                            label: function (tooltipItem, data) {
                                const label = data.datasets[tooltipItem.datasetIndex].label;
                                const cycle = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                                return label + ': ' + cycle + ' sn';
                            }
                        }
                    },
                    legend: {
                        display: false
                    },
                    title: {
                        display: true,
                        text: 'İstasyon Çevrim Süreleri',
                        fontSize: 20
                    },
                    scales: {
                        xAxes: [{
                            stacked: true
                        }]
                        //yAxes: [{
                        //    stacked: true
                        //}]
                    }
                }
            });

相关问题