无法弄清楚如何使用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
};
答案 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",
},
},
],
},
};