在 Chart.js 4.4.2 中移动到不同大小的容器时，图表不会调整大小

Question

我有两张并排的图表，左边一张大，右边一张小，每个图表都在自己的容器中。单击小图表时，我希望图表交换位置，以便小图表移动到左侧的大容器，大图表移动到右侧的小容器，并且图表应调整到其大小新容器。这在 Chart.js v2.9.4 中有效，但在我升级到 v4.4.2 后，图表在移动容器后仍保持原始大小。

这里有一些简单的代码来演示该问题： HTML

<div id='chart-container'>
    <div id='big-chart-container'>
      <canvas id='chart1'></canvas>
    </div>
    <div id='small-chart-container'>
      <canvas id='chart2'></canvas>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!--Swapping charts works in chart.js 2-->
<!--<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>-->

CSS

#chart-container{
    display: flex;
    width: 60vw;
  }

  #big-chart-container{
    width: 60%;
  }

  #small-chart-container{
    width: 30%;
  }

JavaScript

var canvas1 = document.getElementById('chart1')
var canvas2 = document.getElementById('chart2')

let bigChartContainer = document.getElementById('big-chart-container');
let smallChartContainer =document.getElementById('small-chart-container');
let data1 = [5,7,6,2,6,8,4,5]
let data2 = [4,8,15,16,23,42]
let labels1 = [...Array(data1.length).keys()]
let labels2 = [...Array(data2.length).keys()]

let bigChartID = 'chart1';

function chartClicked(chartID){
    if(bigChartID != chartID){ //if small chart is clicked then swap charts
      let smallChart = document.getElementById(chartID)
      let bigChart = document.getElementById(bigChartID)
      bigChartContainer.appendChild(smallChart)
      smallChartContainer.appendChild(bigChart)
      bigChartID = chartID
    }
}
  
const bigChart = new Chart(canvas1.getContext('2d'), {
  type: 'line',
  data: {
    labels: labels1,
    datasets: [{
      label: "Chart 1",
      data: data1
    }]
  },
  options: {
    onClick: function(){
      chartClicked('chart1')
    }
  }
})
const smallChart = new Chart(canvas2.getContext('2d'), {
  type: 'line',
  data: {
    labels: labels2,
    datasets: [{
      label: "Chart 2",
      data: data2,
      borderColor: 'rgb(255, 99, 132)',
    }]
  },
  options: {
    onClick: function(){
      chartClicked('chart2')
    }
  }
})

如果我降级到 Chart.js 2，那么切换图表效果很好。

Answer 1

您可以调用方法

chart#resize()

让图表适应新环境：

var canvas1 = document.getElementById('chart1')
var canvas2 = document.getElementById('chart2')

let bigChartContainer = document.getElementById('big-chart-container');
let smallChartContainer =document.getElementById('small-chart-container');
let data1 = [5,7,6,2,6,8,4,5]
let data2 = [4,8,15,16,23,42]
let labels1 = [...Array(data1.length).keys()]
let labels2 = [...Array(data2.length).keys()]

let bigChartID = 'chart1';

function chartClicked(chartID){
    if(bigChartID != chartID){ //if small chart is clicked then swap charts
        let smallChartElement = document.getElementById(chartID)
        let bigChartElement = document.getElementById(bigChartID)
        bigChartContainer.appendChild(smallChartElement)
        smallChartContainer.appendChild(bigChartElement)
        bigChartID = chartID
        bigChart.resize();
        smallChart.resize();
    }
}

const bigChart = new Chart(canvas1.getContext('2d'), {
    type: 'line',
    data: {
        labels: labels1,
        datasets: [{
            label: "Chart 1",
            data: data1
        }]
    },
    options: {
        onClick: function(){
            chartClicked('chart1')
        }
    }
})
const smallChart = new Chart(canvas2.getContext('2d'), {
    type: 'line',
    data: {
        labels: labels2,
        datasets: [{
            label: "Chart 2",
            data: data2,
            borderColor: 'rgb(255, 99, 132)',
        }]
    },
    options: {
        onClick: function(){
            chartClicked('chart2')
        }
    }
});

#chart-container{
    display: flex;
    width: 90vw;
}

#big-chart-container{
    width: 60%;
}

#small-chart-container{
    width: 30%;
}

<div id='chart-container'>
    <div id='big-chart-container'>
        <canvas id='chart1'></canvas>
    </div>
    <div id='small-chart-container'>
        <canvas id='chart2'></canvas>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

您可以调用不带参数的 .resize() 来让图表采用其容器元素的大小

所以你

chartCliked

可能会成为

function chartClicked(chartID){
   if(bigChartID != chartID){ //if small chart is clicked then swap charts
      let smallChartElement = document.getElementById(chartID)
      let bigChartElement = document.getElementById(bigChartID)
      bigChartContainer.appendChild(smallChartElement)
      smallChartContainer.appendChild(bigChartElement)
      bigChartID = chartID
      bigChart.resize();
      smallChart.resize();
   }
}

片段：