【问题标题】:set my chart min yaxis to 0将我的图表最小 yaxis 设置为 0
【发布时间】:2017-09-17 10:23:56
【问题描述】:

我正在使用 ng2charts 构建在 chartjs 上(我认为)。我想将我的 y 轴设置为从特定值开始。我怎样才能做到这一点?从 typescript 动态生成会很棒,用 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);
  }

  }

【问题讨论】:

    标签: html angular chart.js ng2-charts


    【解决方案1】:

    知道了。它在 chartOptions....

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2011-10-14
      • 1970-01-01
      • 2012-05-11
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-12-22
      • 1970-01-01
      相关资源
      最近更新 更多