javascript - 图表不填充蚂蚁行宽度，即使边距和填充为零

Question

从下图中可以看出，图表不能使用 antd 行的 100% 的宽度。我尝试将宽度设置为 100% 和 window.innerWidth 但这些都不起作用。

该图表是使用 react-chartjs-2 绘制的，它是 chart.js 的一个薄包装，我还没有从他们的文档中找到任何有用的信息。

我还发现了这个Chart.js 响应选项 - Chart not packing container，但我的包在检查时是最新版本（react-chartjs-2@2.7.6 和 chart.js@2.8.0）。

我一直在努力解决这个问题，我不知道接下来该去哪里寻找线索。如果您对此有所了解，请告知我，非常感谢！

这是我用于条形图的选项：

var options = {
  scales: {
    yAxes: [{
      ticks: {
        beginAtZero: true,
        min: 0,
        maxTicksLimit: 5
      },
      gridLines: {
        display: true
      }
    }],

    xAxes: [{
      barPercentage: 0.7,
      gridLines: {
        display: false
      },
      offset: true,
      type: "time",
      time: {
        unit: "day",
        stepSize: 1
      }
    }]
  },
  maintainAspectRatio: true
};

它的渲染方法（我使用的是 React）：

render() {
      return (
        <Bar
          data={this.state.chartData}
          width={this.state.appWindow.width}
          height={this.state.appWindow.width*0.5}
          options={this.changeDateOptions(options)}
          legend={legend}
        />
      )
    //}
  }

ant-row 使用的样式：

const rowStyle = {
  width: '100%',
  display: 'flex',
  flexFlow: 'row wrap',
};

以及显示图表如何没有填充 100% 宽度的图片：

标签： javascriptreactjsantdisomorphic-javascript