html - 样式化 React-Chartjs 以填充父列

Question

我似乎找不到让 React-Chartjs 条形图填满整个引导列的方法。

<Col sm={ 6 } className="text-center">
      <Panel>
          <h3 style={{color: "#bfbfbf"}}>1265</h3>
          <p>orders</p>
          <Bar width="100% !important" data={data} options={options}/>
      </Panel>
      <Panel>
          <h3 style={{color: "#bfbfbf"}}>1265</h3>
          <p>orders</p>
          <Bar style={{ width: "100% !important", height: "auto !important" }} data={data} options={options}/>
      </Panel>
</Col>

结果：

我非常不希望设置静态输入，因为应用程序将在许多不同尺寸的屏幕上。响应大小将是这里的目标。

Answer 1

您可以通过将名为“响应”的选项设置为 true 来轻松做到这一点。

<Bar data={data} options={{ responsive: true }}/>

Answer 2

您可以通过使用响应选项在 JS 中执行此操作。

var myChart = {
    type: 'line',
    data: {
      labels: getLabels(),
      datasets: [{
        label: 'Graph1',
        data: getData(),
      }]
    },
    options: {
      'responsive' : true,
    }