将我的图表最小yaxis设置为0 [英] set my chart min yaxis to 0

问题描述

我正在使用 ng2charts （基于chartjs构建）（我认为）。我想将y轴设置为特定值。我怎样才能做到这一点？从打字稿动态地讲会很棒，可以接受HTML硬编码。

I am using ng2charts which are build on chartjs (I think). I want to set my y-axis to start at a particular value. How can I do this? Dynamically from typescript would be great, hardcoded in HTML acceptable.

我的图表组件html

My chart component html

<div>
  <div style="display: block">

    <canvas baseChart
            [datasets]="barChartData"
            [labels]="barChartLabel"
            [options]="barChartOptions"
            [legend]="barChartLegend"
            [chartType]="barChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></canvas>

    <div align="center">{{barChartTitle}}</div>
  </div>
</div>

我的组件打字稿

import { Component, Input, OnInit, NgZone, OnChanges, ViewChild } from '@angular/core';
import { BaseChartDirective } from 'ng2-charts/ng2-charts';
@Component({
  selector: 'app-bar-chart-demo',
  templateUrl: './bar-chart-demo.component.html',
  styleUrls: ['./bar-chart-demo.component.css'],
  inputs:['chartLabel', 'chartData', 'chartType', 'chartTitle', 'chartLarge']
})
export class BarChartDemoComponent{
  @ViewChild(BaseChartDirective) chart: BaseChartDirective;

  public barChartOptions:any = {
    scaleShowVerticalLines:false,
    responsive:true
  };

  //Labels
  public barChartLabel:string[];
  @Input() chartLabel:string[];

  //Type
  public barChartType:string;
  @Input() chartType:string;

  //Legend
  public barChartLegend:boolean = true;
  @Input() chartLegend:boolean;

  //Data
  public barChartData:any[];
   @Input() chartData:any[];

  //Title
  public barChartTitle:string;
  @Input() chartTitle:string;

  //Legend
  public barChartLarge:boolean = true;
  @Input() chartLarge:boolean;

  ngOnChanges(){

  }

  ngOnInit(){
    //Init the sub componenets
     this.barChartLabel=this.chartLabel;
     this.barChartData=this.chartData;
     this.barChartType=this.chartType;
     this.barChartTitle=this.chartTitle;
  }

  // events
  public chartClicked(e:any):void {
    //console.log(e);
  }

  }

推荐答案

明白了。它在chartOptions中。...

got it. Its in the chartOptions....

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

这篇关于将我的图表最小yaxis设置为0的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！