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

Question

我正在为 ng2 chart 使用我的 angular 项目，我在条形图上有一些冲突，我能知道如何像这种格式一样输入值吗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' }
  ];

Answer 1

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

加上barChartOptions

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';
          }
        }
      }]
   }
  };

希望对您有所帮助！..编码愉快！！

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

how to put ng2 chart label y axis value put 9000 = 9k

typescript

ng2-charts

angular