如何在 Chart.js 中使用氣泡圖修復混合圖表的大小？

Question

我正在使用Chart.js 3.7.0實現一個混合了bubble圖和bar的圖表。

為了防止canvas調整大小，我將大小值保存在canvas標簽中，並將選項值修改如下。 也就是說，我們希望canvas具有固定大小。

HTML 標簽

<canvas id="mixed_graph_canvas" width="1320" height="685"></canvas>

選項

options : {
   responsive : false,
   maintainAspectRation : false
}

但是，如果修改bubble圖的y 、 r的值，則canvas的大小會發生如下變化。

當bubble圖中的0 , 0 , 20

...
{
   x : 0,
   y : 0,
   z : 20
}

當bubble圖中的0 , 80 , 50

... 
{
   x : 0,
   y : 80,
   r : 50
}

這是繪制上述圖表的完整源代碼。

const chartData = {
        labels   : [
            '', 
            '0,0~49,10',
            '0,50~74,10',
            '0,75~99,10',
            '0,100~124,10',
            '0,125~149,10',
            '0,150~174,10',
            '0,175~199,10',
            '0,200~229,10',
            '0,230,10',
            ''
        ],
        datasets : [
            {
                type            : 'bar',
                label           : '',
                data            : [0, 50, 50, 50, 50, 50, 50, 50, 50, 50, 0],
                backgroundColor : 'rgba(241, 246, 0, 1)',
                borderColor     : 'rgba(241, 246, 0, 1)',
                borderWidth     : 0.1,
                barPercentage   : 0.05,
                order           : 1
            },
            {
                type : 'bubble',
                data : [
                    {   
                        x : 0,
                        y : 0,
                        r : 0
                    },
                    {   
                        x : 0,
                        y : 0,
                        r : 20
                    },
                    {   
                        x : 0,
                        y : 50,
                        r : 20
                    },
                    {   
                        x : 0,
                        y : 0,
                        r : 20
                    },
                    {   
                        x : 0,
                        y : 0,
                        r : 20
                    },
                    {   
                        x : 0,
                        y : 0,
                        r : 20
                    },
                    {   
                        x : 0,
                        y : 0,
                        r : 20
                    },
                    {   
                        x : 0,
                        y : 0,
                        r : 20
                    },
                    {   
                        x : 0,
                        y : 0,
                        r : 20
                    },
                    {   
                        x : 0,
                        y : 0,
                        r : 20
                    },
                    {   
                        x : 0,
                        y : 0,
                        r : 0
                    }
                ],
                backgroundColor : 'rgba(148, 181, 115, 0.7)',
                borderColor     : 'rgba(228, 248, 188, 0.92)',
                order           : 2
            }
        ]
    };

    const chartConfig = {
        type    : 'bar',
        data    : chartData,
        options : {
            responsive          : false,
            maintainAspectRatio : false,
            plugins             : {
                legend          : {
                    display : false
                },
                chartAreaBorder : {
                    borderColor : 'rgba(255, 255, 255, 0.2)',
                    borderWidth : 2
                },
                tooltip         : {
                    titleFont     : {
                        size : 24
                    },
                    bodyFont      : {
                        size : 14
                    },
                    footerFont    : {
                        size : 0
                    },
                    titleAlign    : 'center',
                    bodyAlign     : 'left',
                    borderColor   : 'rgba(119, 119, 119, 0.9)',
                    borderWidth   : 1,
                    displayColors : false,
                    filter        : function(tooltipItem) {
                        return tooltipItem.datasetIndex === 0;
                    },
                    callbacks     : {
                        title : function(tooltipItem) {
                            let percentage = tooltipItem[0].label.split(',');

                            return percentage[0] + '%';
                        },
                        label : function(tooltipItem) {
                            let percentage = tooltipItem.label.split(',');
                            let distance   = percentage[1];

                            return `Distance ${distance}m`;
                        },
                        afterLabel : function(tooltipItem) {
                            let percentage = tooltipItem.label.split(',');
                            let targetSize = percentage[2];

                            return `Target     ${targetSize}m`;
                        }
                    }
                }
            },
            scales              : {
                x  : {
                    display  : false,
                    position : 'bottom',
                    max      : 100,
                    min      : 0,
                    ticks    : {
                        beginAtZero : true,
                        stepSize    : 10,
                        callback    : () => ('')
                    },
                    grid     : {
                        drawTicks   : false,
                        color       : 'rgba(255, 255, 255, 0.2)',
                        borderWidth : 2
                    }
                },
                y  : {
                    position : 'left',
                    max      : 100,
                    min      : 0,
                    ticks : {
                        display     : false,
                        stepSize    : 5,
                        beginAtZero : true,
                        callback    : () => ('')
                    },
                    grid  : {
                        color            : 'rgba(255, 255, 255, 0.2)',
                        drawTicks        : false,
                        drawBorder       : true,
                        borderDash       : [5, 5],
                        borderDashOffset : 2,
                        borderWidth      : 2,
                        lineWidth        : context => context.index % 5 ? 1 : 0
                    }
                },
                y2 : {
                    max   : 100,
                    min   : 0,
                    ticks : {
                        display  : false,
                        stepSize : 25
                    },
                    grid  : {
                        drawTicks  : false,
                        drawBorder : false,
                        color      : 'rgba(255, 255, 255, 0.2)'
                    }
                }
            },
            interaction         : {
                mode            : 'index',
                position        : 'custom',
                xAlign          : 'center',
                yAlign          : 'bottom',
                backgroundColor : 'rgba(85, 85, 85, 0.9)'
            },
            datasets            : {
                bubble : {
                    responsive          : false,
                    maintainAspectRatio : false,
                    elements  : {
                        point : {
                            radius : function(context) {
                                const size = context.chart.width;
                                const base = Math.abs(context.raw.v) / 1000;

                                return (size / 24) * base;
                            }
                        }
                    },
                    animation : {
                        easing   : 'linear',
                        duration : 1000,
                        x : {
                            from : true
                        }
                    }
                }
            }
        },
        plugins : [chartAreaBorder]
    };

    const distanceAccuracyMixedChart = new Chart(context, chartConfig);

即使bubble值發生變化或bar值發生變化，如何修改canvas以具有固定的canvas大小？

即使數據集中的值發生變化，我希望canvas以1320px寬和685px垂直的固定值繪制。

Answer 1

以下圖表options似乎是一個不錯的方法。

options : {
   responsive : false,
   maintainAspectRation : false,
   ...
}

此外，您可以嘗試在div元素中包含canvas並省略canvas上的width和height 。

<div class="chart-container">
  <canvas id="mixed_graph_canvas"></canvas>
</div>

然后您需要定義以下CSS 。

.chart-container {
  width: 1320px;
  height: 685px;  
}

#mixed_graph_canvas {
  width: 100%;
  height: 100%;
} 

Answer 2

如果將canvas包裝在div中無法解決問題，或者如果響應選項不起作用，那么以下options可能會給您想要的結果。

options : {
  responsive : false,
  maintainAspectRatio : false,
  layout : {
    autoPadding : false
  }
}