样式化 React-Chartjs 以填充父列答案

【问题标题】：Styling React-Chartjs to fill parent column样式化 React-Chartjs 以填充父列
【发布时间】：2017-06-03 08:49:59
【问题描述】：

我似乎找不到让 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>

结果：

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

【问题讨论】：

标签： html css twitter-bootstrap reactjs react-chartjs

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您可以在 JS 中使用响应选项来完成。

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

【讨论】：