如何放置ng2图表标签y轴值放置9000 = 9k

问题描述

我将我的角度项目用于 ng2 chart ，在条形图上存在一些冲突，我可以知道如何将这种格式的值放入1000 = 1k

此处是 stack blitz 代码

我的代码在这里

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

.ts

 public barChartOptions: ChartOptions = {
    responsive: true,};
  public barChartLabels: Label[] = ['2006','2007','2008','2009','2010','2011','2012'];
  public barChartType: ChartType = 'bar';
  public barChartLegend = true;
  public barChartPlugins = [];

  public barChartData: ChartDataSets[] = [
    { data: [6500,5900,8000,8100,5600,5500,4000],label: 'Series A' },{ data: [2800,4800,4000,1900,8600,2700,9000],label: 'Series B' }
  ];

解决方法

解决方案很简单，请阅读chartJS和ng2Charts的完整文档。 我已经更新了您的代码，您可以在此处找到Live Demo。 解决方案是添加具有barChartOptions属性的ticks。

public barChartOptions: ChartOptions = {
    responsive: true,scales: { //you're missing this
      yAxes: [{
         scaleLabel: {
            display: true,labelString: 'Frequency Rate'
         },ticks: { // and this
            callback: function(value,index,values) {
             return value/1000 + 'k';
          }
        }
      }]
   }
  };

希望对您有所帮助！