Question

我正在使用构建在chartjs上的ng2charts（我认为）。我想将y轴设置为从特定值开始。我怎样才能做到这一点？动态地从打字稿中获得很好的，用HTML格式编码可以接受。

我的图表组件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);
  }

  }

Answer 1

得到了它。它在图表选项....

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

将我的图表min yaxis设置为0

1 个答案: