ng2-charts - Как обозначить ось y? - PullRequest
Новая
       33

ng2-charts - Как обозначить ось y?

0 голосов
/ 11 июля 2019

Невозможно понять, как пометить ось Y, используя ng2-диаграммы. Документация только содержит информацию о маркировке оси x, и использование метода charts.js напрямую не дает результата.

Форма компонент.ts: 

  public barChartOptions = {
    scaleShowVerticalLines: false,
    maintainAspectRatio: false,

    yAxes: [{
      scaleLabel: {
        display: true,
        labelString: 'Frequency Rate'
      }}]
    //responsive: true
  };

HTML: 

<script src="node_modules/chart.js/src/chart.js"></script>

<!--<button mat-button mat-raised-button color="primary" (click)="populate_data()">Update</button>-->

<div>
  <canvas baseChart class="chart" height ='450'

        [datasets]="barChartData"
        [labels]="barChartLabels"
        [options]="barChartOptions"
        [legend]="barChartLegend"
        [chartType]="barChartType">

      </canvas>
    </div>

1 Ответ

1 голос
/ 11 июля 2019

ng2-charts - это угловая библиотека-обертка вокруг исходной библиотеки chart.js.

Более подробная документация в chart.js: https://www.chartjs.org/docs/latest/charts/bar.html

как обозначить ось y с помощью ng2-диаграмм

В chart.js тики оси y определяются автоматически на основе данных, которые вы вставили в ChartDataSets []

например. максимальное значение по оси Y будет 99 

public barChartData: ChartDataSets[] = [
    { data: [5, 1, 99], label: 'Series A' },
    { data: [6, 10, 45], label: 'Series B' }
];

Чтобы контролировать внешний вид тиков оси Y, обратитесь к этой документации: https://www.chartjs.org/docs/latest/axes/cartesian/linear.html

Так что, если вы хотите контролировать шаг шага по размеру тика, равный 2, вы можете сделать что-то вроде: 

yAxes: [{
   ticks: {
      stepSize: 2,
      beginAtZero: true
   }
}]

Если вы хотите, чтобы максимальная метка на оси Y всегда была равна 100, вы определите свои параметры следующим образом: 

yAxes: [{
   ticks: {
      max: 100
   }
}]

Чтобы обозначить вашу ось Y: 

public barChartOptions: ChartOptions = { // import { ChartOptions } from 'chart.js'; 
   ...
   responsive: true,
   maintainAspectRatio: false,
   ...
   scales: { //you're missing this
      yAxes: [{
         scaleLabel: {
            display: true,
            labelString: 'Frequency Rate'
         }
      }]
   }//END scales
};
...