2017-04-20 11 views
0

私はng2chartsを使用しています。これはchartjsでビルドされています(私は思う)。私はY軸を特定の値から開始するように設定したい。これどうやってするの? typescriptから動的に大きく、HTMLでハードコードされています。私のチャートの最小yaxisを0に設定

私のチャートコンポーネントの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> 

マイコンポーネントtypescriptです

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); 
    } 

    } 

答えて

0

それを得ました。そのチャートのオプション....

public barChartOptions:any = { 
    scaleShowVerticalLines:false, 
    responsive:true, 
    scales: { 
     yAxes: [{ 
     ticks: { 
      beginAtZero: true 
     } 
     }] 
    } 
    }; 
関連する問題