ng2图表：无法让条形图轴从0开始答案

【问题标题】：ng-2 Charts: can't get bar chart axis to start at 0ng2图表：无法让条形图轴从0开始
【发布时间】：2019-02-19 14:58:35
【问题描述】：

我正在尝试使用 ng-2 Charts，以便在我的 Angular 应用程序中拥有一个简单的响应式条形图。

我的数据集中的数字很小。最小的是 0，最大的是 5。大多数情况下，这些数字彼此相差 1 点。例如 [4, 4.1, 4] 很常见。因此，我需要 Y 轴从 0 开始并在 5 结束。

目前，我的图表与上面的数据集是这样的

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

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

这是我首先尝试的帖子：

但这并没有起到任何作用。

这是我的完整条形图组件

  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
          }
        }]
      }
    }
  };

但这也无济于事。我究竟做错了什么？

编辑：自人们提出要求以来的完整组件模型

条形图.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”的图表相关的打字稿

  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'},
    ];
  }

【问题讨论】：

你能包含你的组件标记吗？
看起来你嵌套你的选项对象的深度太深了（c&p 有点太多了？;-)）。检查chartjs.org/docs/latest 选项对象的外观并确保您的barChartOptions 变量反映了这一点。然后通过 options 属性将其传递给您的 ng2-charts 组件。
我有点困惑@TommyF 我很确定我的 barChartOptions 对象的结构是正确的。好像我正确地遵循了文档。我错过了什么吗？
我已经添加了一个答案，它与最新版本的图表 js stackblitz.com/edit/angular-ng2-chart 一起使用

标签： html angular charts ng2-charts

【解决方案1】：

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

【讨论】：

【解决方案2】：

optionsVariable 应该是options

【讨论】：

最初我使用的是 optionsVariable。但正如您在以后的版本中看到的那样，我已经更新了它。我仍然有问题。

【解决方案3】：

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

将 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

【讨论】：