React 图表：防止图表 canvas 随高度和宽度缩放

Question

我正在使用来自 react-chart-js (https://github.com/reactchartjs/react-chartjs-2/blob/react16/example/src/charts/HorizontalBar.js) 的水平条，如下所示，

  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,
          barPercentage: 0.2,
        },
      ],
    },
  };

和

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

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

Answer 1

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

Answer 2

在我的例子中，设置 maintainAspectRatio:false 并在 div

上提供 height/width

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

帮助限制了 canvas 的可扩展性。

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

React 图表：防止图表 canvas 随高度和宽度缩放

React chart : prevent chart's canvas scaling with height and width

javascript

reactjs

chart.js

react-chartjs

react-chartjs-2