reactjs - 是否可以将 0 设置为条形图的最小数字？react-chart.js-2

Question

我正在尝试使用 react-chart.js-2 制作条形图。我刚刚注意到所有条形图示例都从数据的最小数量开始，而不是 0。

下面的例子，条形图从40开始，而不是0。我要做的是从0开始制作条形图，而不是数据的最小数量。

是否可以使用 react-chart.js2 制作它？

这是代码（主要来自官方示例的代码）

import React from 'react';
import {Bar} from 'react-chartjs-2';
import 'chartjs-plugin-datalabels';


const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
 {
  label: 'My First dataset',
  backgroundColor: 'rgba(255,99,132,0.2)',
  borderColor: 'rgba(255,99,132,1)',
  borderWidth: 1,
  hoverBackgroundColor: 'rgba(255,99,132,0.4)',
  hoverBorderColor: 'rgba(255,99,132,1)',
  data: [65, 59, 80, 81, 56, 55, 40]
  }
 ]
 };


export default React.createClass({
displayName: 'BarExample',

render() {
 return (
  <div>
    <h2>Bar Example (custom size)</h2>
    <Bar
      data={data}
      width={150}
      height={100}

    />
  </div>
  );
 }
});

这是一个演示。

Answer 1

要从 开始 y 轴0，您必须在图表选项中将beginAtZero属性设置true为 y 轴刻度，如下所示：

options={{
  scales: {
    yAxes: [{
      ticks: {
        beginAtZero: true
      }
    }]
  }
}}

见 -工作演示

Answer 2

您需要将这段代码添加到数据集对象

options: {
              scales: {
                  yAxes: [{
                      ticks: {
                          beginAtZero: true,
                      }
                  }]
              }
          }

您可以在文档轴范围设置中阅读更多内容