Графики ng-2: невозможно получить ось гистограммы с 0

Question

Я пытаюсь использовать ng-2 Charts , чтобы в моем угловом приложении я мог получить простой отзывчивый столбец.

Числа в моем наборе данных довольно маленькие. Наименьшее - 0, а наибольшее - 5. В большинстве случаев числа находятся в пределах 1 точки друг от друга. Например, [4, 4.1, 4] довольно распространено. По этой причине мне нужно, чтобы оси Y начинались с 0 и заканчивались на 5.

В настоящее время мой график выглядит так с указанным выше набором данных

Поскольку он автоматически устанавливает значение диаграммы на 4, мои два других бара вообще не отображаются. Это не то, что я хочу. В поисках проблемы я наткнулся на несколько постов, в которых рекомендуется указать следующие параметры: Variable

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

Вот сообщения, которые я попробовал первым:

• Невозможно сделать так, чтобы ось y начиналась с нуля на Charts.js v2.1.4

• установите для моего графика min 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",

И вот я вставляю javascript в idex.html

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

Я тоже нашел этот пост как установить начальное значение как "0" в 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
          }
        }]
      }
    }
  };

Но это тоже ничего не сделало. Что я делаю неправильно?

Редактировать: Макет полного компонента, так как люди спрашивают

бар-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>

бар-chart.component.ts

import {Component, OnInit, Input} из '@ angular / core';

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

Answer 2

Ваш объект опции имеет неправильную структуру, вам не нужно извлекать свойство опции.

установите оси 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>

демонстрация стекаблиц

Answer 3

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

Answer 4

optionsVariable должно быть options