反应图表：防止图表的画布随高度和宽度缩放

问题描述

我正在使用 react-chart-js (https://github.com/reactchartjs/react-chartjs-2/blob/react16/example/src/charts/HorizontalBar.js) 中的 Horizo​​ntal Bar，如下所示，

  const data = {
    label: ["graph"],datasets: [
      {
        label: "A",backgroundColor: "red",data: [50],},{
        label: "B",backgroundColor: "yellow",data: [10],],};

  const chartOptions = {
    scales: {
      xAxes: [
        {
          stacked: true,barPercentage: 0.2,yAxes: [
        {
          stacked: true,};

和

<div>
  <HorizontalBar data={data} options={chartOptions}/>
</div>

我尝试将高度直接应用于 div 或水平条以限制画布的缩放，但它无法解决。是否可以分别为图表的画布提供高度和宽度。

解决方法

尝试在您的选项对象中设置 responsive: false。这应该根据文档制作，以便画布不会调整大小 (https://www.chartjs.org/docs/latest/general/responsive.html#configuration-options)

,

就我而言，设置 maintainAspectRatio:false 以及在 div 上提供高度/宽度

<div style={{height:'100px',width:'200px'}}>
<HorizontalBar data={data} options={chartOptions}/>
</div>

有助于限制画布的可扩展性。

相关来源：https://www.chartjs.org/docs/latest/general/responsive.html#important-note