ng2-charts-如何标记y轴?

时间:2019-07-11 01:19:08

标签: angular ng2-charts

无法弄清楚如何使用ng2-chart标记y轴。文档似乎只包含有关标记x轴的信息,并且直接使用Charts.js方法不会产生任何结果。

Form component.ts:

df['Id'] = df.groupby(['Name', s], sort=False).ngroup().add(1)

Out[834]:
     Name            Datetime  Id
0     Bob 2018-04-26 12:00:00   1
1  Claire 2018-04-26 12:00:00   2
2     Bob 2018-04-26 12:10:00   1
3     Bob 2018-04-26 12:30:00   1
4   Grace 2018-04-27 08:30:00   3
5     Bob 2018-04-27 09:30:00   4
6     Bob 2018-04-27 09:40:00   4
7     Bob 2018-04-27 10:00:00   4
8     Bob 2018-04-27 10:30:00   4
9     Bob 2018-04-27 11:30:00   5

HTML:

  public barChartOptions = {
    scaleShowVerticalLines: false,
    maintainAspectRatio: false,

    yAxes: [{
      scaleLabel: {
        display: true,
        labelString: 'Frequency Rate'
      }}]
    //responsive: true
  };

2 个答案:

答案 0 :(得分:1)

ng2-charts是原始chart.js库的包装角度库。

chart.js中的文档更详细:https://www.chartjs.org/docs/latest/charts/bar.html

  

如何使用ng2-charts标记y轴

在chart.js中,y轴的滴答声是根据您推送到ChartDataSets []中的数据自动确定的。

例如y轴最大值为99

public barChartData: ChartDataSets[] = [
    { data: [5, 1, 99], label: 'Series A' },
    { data: [6, 10, 45], label: 'Series B' }
];

要控制y轴刻度线的外观,请参阅以下文档: https://www.chartjs.org/docs/latest/axes/cartesian/linear.html

因此,如果您希望将刻度的stepSize控制为2的增量,则可以执行以下操作:

yAxes: [{
   ticks: {
      stepSize: 2,
      beginAtZero: true
   }
}]

如果要将最大y轴刻度标签设置为始终为100,则将按以下方式定义选项:

yAxes: [{
   ticks: {
      max: 100
   }
}]

要标记您的y轴,

public barChartOptions: ChartOptions = { // import { ChartOptions } from 'chart.js'; 
   ...
   responsive: true,
   maintainAspectRatio: false,
   ...
   scales: { //you're missing this
      yAxes: [{
         scaleLabel: {
            display: true,
            labelString: 'Frequency Rate'
         }
      }]
   }//END scales
};

答案 1 :(得分:0)

这应该会有所帮助,不要忘记为每个设置“display:true”。对我有用

ChartOptions: any = {
 responsive: true,
 scales: {
  yAxes: [
   {
    display: true,
    scaleLabel: {
     display: true,
     labelString: "Number of Reads",
    },
   },
  ],
  xAxes: [
   {
    scaleLabel: {
     display: true,
     labelString: "Date",
    },
   },
  ],
 },
};