html - ng-2 图表 : can't get bar chart axis to start at 0

Question

我正在尝试使用 ng-2 Charts这样我就可以在我的 Angular 应用程序中有一个简单的响应条形图。

我的数据集中的数字非常小。最小的是 0，最大的是 5。大多数情况下，数字之间的差值在 1 点以内。例如 [4, 4.1, 4] 很常见。因此，我需要 Y 轴从 0 开始到 5 结束。

目前，我的图表看起来像上面的数据集

因为它自动将图表的 bast 设置为 4，所以我的其他两个条形根本不显示。这不是我想要的。在谷歌搜索这个问题后，我发现了一些建议将以下内容放入您的 optionsVariable

  scales : {
    yAxes: [{
       ticks: {
          beginAtZero: true,
          max : 5,
        }
    }]
  }

这是我首先尝试的帖子:

• Unable to make y-axis to begin at zero on Charts.js v2.1.4

• set my chart min yaxis to 0

但这没有任何作用。

这是我的完整条形图组件

  public barChartOptions: any = {
    scaleShowVerticalLines: true,
    responsive: true,
    optionsVariable : {
      scales : {
        yAxes: [{
           ticks: {
              beginAtZero: true,
              max : 5,
            }
        }]
      }
    }
  };

  public barChartLegend: boolean = false;


  @Input() barChartLabels: string[];
  @Input() chartColors: string[];
  @Input() barChartData: any[];
  @Input() barChartType: string;



  constructor() { }

  ngOnInit() {
  }

这是我正在使用的版本

"chart.js": "^2.7.2",
"ng2-charts": "^1.6.0",

这是我在 idex.html 中插入的 javascript

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>

我也找到了这篇文章 how to set start value as "0" in chartjs?

编辑 1:

所以我编辑了我的 BarChartOptions

  public barChartOptions: any = {
    scaleShowVerticalLines: false,
    responsive: true,
    options : {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero : true
          }
        }]
      }
    }
  };

但这没有任何作用。

我想我会尝试更多的选择

  public barChartOptions: any = {
    scaleShowVerticalLines: false,
    responsive: true,
    options : {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero : true,
            min: 0,
            max: 5
          }
        }]
      }
    }
  };

但这也没有任何作用。我究竟做错了什么？

编辑:完整的 componenet 模型，因为人们已经问过

bar-chart.component.html

<div>
  <div style="display: block">
    <canvas baseChart
            [datasets]="barChartData"
            [labels]="barChartLabels"
            [options]="barChartOptions"
            [legend]="barChartLegend"
            [chartType]="barChartType"
            [colors]="chartColors"
            ></canvas>
  </div>
</div>

条形图.component.ts

从“@angular/core”导入{组件、OnInit、输入}；

@Component({
  selector: 'app-bar-chart',
  templateUrl: './bar-chart.component.html',
  styleUrls: ['./bar-chart.component.css']
})
export class BarChartComponent implements OnInit {

  public barChartOptions: any = {
    scaleShowVerticalLines: false,
    responsive: false,
    options : {
      scales : {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      }
    }
  };

  public barChartLegend: boolean = false;


  @Input() barChartLabels: string[];
  @Input() chartColors: string[];
  @Input() barChartData: any[];
  @Input() barChartType: string;



  constructor() { }

  ngOnInit() {
  }

}

这是我从“results.component.html”调用条形图组件的地方

<app-bar-chart [barChartType]="programQualityBarChartType" [barChartData]="programQualityBarChartData" [barChartLabels]="programQualityLabels" [chartColors]="programQualityColors"></app-bar-chart>

因为我在父组件中设置了很多这些值，这里是与“results.component.ts”中的图表相关的 typescript

  populateCharts() {
    /*Program quality*/
    this.programQualityColors = [
      {
        backgroundColor: ['red', 'yellow', 'blue']
      }
    ];

    this.programQualityBarChartType = 'horizontalBar';
    this.programQualityLabels = ['Assessment & Diagnostics', 'Development', 'Performance Management'];
    this.programQualityBarChartData = [
      {data: [this.programQuality.assessment, this.programQuality.development, this.programQuality.performance], label: 'Program Quality'},
    ];
  }

Answer 1

您的选项对象结构错误，您不需要提取选项属性。

将 y 轴设置为从零开始

  public chartOption = {
    responsive: true,
    scales: {
      yAxes: [
        {
          ticks: {
            beginAtZero: true
          }
        }
      ]
    }
  }

将 x 轴设置为从零开始

  public horizontalChartOption = {
    responsive: true,
    scales: {
      xAxes: [
        {
          ticks: {
            beginAtZero: true
          }
        }
      ]
    }
  }

模板

<h1> Type : bar</h1> 
    <canvas baseChart width="400" height="400"
                [data]="lineChartData"
                [labels]="lineChartLabels"
                [legend]="false"
                chartType="bar"
                [options]="chartOption"
                ></canvas>

</div>
<div>
<h1> Type : Horizontal Bar</h1> 

    <canvas baseChart width="400" height="400"
                [data]="lineChartData"
                [labels]="lineChartLabels"
                [legend]="false"
                chartType="horizontalBar"
                [options]="horizontalChartOption"
                ></canvas>

</div>

stackblitz demo