是否可以将 0 设置为条形图的最小数字？反应-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>
  );
 }
});

这里是demo.

Answer 1

要从 0 开始 y 轴，您必须将 beginAtZero 属性设置为 true 对于 y 轴刻度，在您的图表选项中，像这样：

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

见 - working demo

Answer 2

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

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

您可以在文档中阅读更多内容Axes Range setting

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

Is it possible to set up 0 as a minimum number for bar chart? react-chart.js-2

reactjs

chart.js

react-chartjs