ng-2图表：无法使条形图轴从0开始

Question

我正在尝试使用ng-2图表，以便在我的角度应用程序中可以使用一个简单的响应式条形图。

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

目前，带有上述数据集的图表看起来像这样

因为它会自动将图表的韧度设置为4，所以其他两个条形图根本不会显示。这不是我想要的 搜寻问题后，我发现了几则建议将以下内容纳入您的选项的帖子

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

这是我首先尝试的帖子：

• 无法在Charts.js v2.1.4上使y轴从零开始

• 将我的图表最小yaxis设置为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>

我还发现这篇文章 如何在chartjs中将起始值设置为“ 0”？

编辑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'导入{Component，OnInit，Input};

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

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演示

Answer 2

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