Question

我正在尝试使用ng-2 Charts，以便在我的有角度的应用程序中可以有一个简单的响应式条形图。

我的数据集中的数字很小。最小的数字为0，最大的数字为5。大多数情况下，数字彼此之间的误差在1点之内。例如[4、4.1、4]很常见。因此，我需要Y轴从0开始到5结束。

目前，带有上述数据集的图表看起来像这样

因为它会自动将图表的韧度设置为4，所以其他两个柱形图根本不会显示。这不是我想要的在搜寻该问题后，我发现了一些建议将以下内容放入您的optionsVariable

中的帖子

  scales : {
    yAxes: [{
       ticks: {
          beginAtZero: true,
          max : 5,
        }
    }]
  }

这是我首先尝试的帖子：

但这没做。

这是我完整的条形图组件

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

  public barChartLegend: boolean = false;


  @Input() barChartLabels: string[];
  @Input() chartColors: string[];
  @Input() barChartData: any[];
  @Input() barChartType: string;



  constructor() { }

  ngOnInit() {
  }

这是我正在使用的版本

"chart.js": "^2.7.2",
"ng2-charts": "^1.6.0",

这是我在idex.html插入的javascript

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>

我也找到了这个帖子 how to set start value as "0" in chartjs?

编辑1：

所以我编辑了BarChartOptions

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

但这没做。

我想我会在尝试的同时尝试更多选择

  public barChartOptions: any = {
    scaleShowVerticalLines: false,
    responsive: true,
    options : {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero : true,
            min: 0,
            max: 5
          }
        }]
      }
    }
  };

但这也没做。我究竟做错了什么？

编辑：自从人们提出要求以来，完整的componenet样机

bar-chart.component.html

<div>
  <div style="display: block">
    <canvas baseChart
            [datasets]="barChartData"
            [labels]="barChartLabels"
            [options]="barChartOptions"
            [legend]="barChartLegend"
            [chartType]="barChartType"
            [colors]="chartColors"
            ></canvas>
  </div>
</div>

bar-chart.component.ts

从'@ angular / core'导入{Component，OnInit，Input};

@Component({
  selector: 'app-bar-chart',
  templateUrl: './bar-chart.component.html',
  styleUrls: ['./bar-chart.component.css']
})
export class BarChartComponent implements OnInit {

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

  public barChartLegend: boolean = false;


  @Input() barChartLabels: string[];
  @Input() chartColors: string[];
  @Input() barChartData: any[];
  @Input() barChartType: string;



  constructor() { }

  ngOnInit() {
  }

}

在这里我从“ results.component.html”中调用条形图组件。

<app-bar-chart [barChartType]="programQualityBarChartType" [barChartData]="programQualityBarChartData" [barChartLabels]="programQualityLabels" [chartColors]="programQualityColors"></app-bar-chart>

并且由于我在父组件中设置了很多这些值，因此这是来自'results.component.ts'中与图表相关的打字稿

  populateCharts() {
    /*Program quality*/
    this.programQualityColors = [
      {
        backgroundColor: ['red', 'yellow', 'blue']
      }
    ];

    this.programQualityBarChartType = 'horizontalBar';
    this.programQualityLabels = ['Assessment & Diagnostics', 'Development', 'Performance Management'];
    this.programQualityBarChartData = [
      {data: [this.programQuality.assessment, this.programQuality.development, this.programQuality.performance], label: 'Program Quality'},
    ];
  }

Answer 1

您的选项对象结构错误，不需要提取选项属性。

设置y轴从零开始

  public chartOption = {
    responsive: true,
    scales: {
      yAxes: [
        {
          ticks: {
            beginAtZero: true
          }
        }
      ]
    }
  }

将x轴设置为从零开始

  public horizontalChartOption = {
    responsive: true,
    scales: {
      xAxes: [
        {
          ticks: {
            beginAtZero: true
          }
        }
      ]
    }
  }

模板

<h1> Type : bar</h1> 
    <canvas baseChart width="400" height="400"
                [data]="lineChartData"
                [labels]="lineChartLabels"
                [legend]="false"
                chartType="bar"
                [options]="chartOption"
                ></canvas>

</div>
<div>
<h1> Type : Horizontal Bar</h1> 

    <canvas baseChart width="400" height="400"
                [data]="lineChartData"
                [labels]="lineChartLabels"
                [legend]="false"
                chartType="horizontalBar"
                [options]="horizontalChartOption"
                ></canvas>

</div>

stackblitz demo

Answer 2

ChangeTracker

public chartOption = { 响应式的：是的，秤：{ 轴：[ { 滴答声：{ beginAtZero：正确 } } ] } }

Answer 3

设置y轴从零开始

public chartOption = {
responsive: true,
scales: {
  yAxes: [
    {
      ticks: {
        beginAtZero: true
      }
    }
  ]
} }

Answer 4

optionsVariable应该是options

ng-2图表：无法使条形图轴从0

4 个答案: