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

Question

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

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

​

​

是否可以使用react chart.js 2使其生效？

下面是代码(主要是官方示例中的代码)

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

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

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

见- 工作演示

Answer 2

需要将这段代码添加到dataset对象中。

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

您可以在docs 轴线范围设置中阅读更多内容。