[英]how can i modify scale labels in angular chart js?
我正試圖在angular chart js
添加我自己的比例標簽,如本期https://github.com/jtblin/angular-chart.js/issues/33 ,問題是當我嘗試這個例子時,即使是相同的代碼它不起作用,它不會采取我在我的范圍內分配的選項。
由於我有4個狀態是相同的,我以為我可以做這樣的功能,但我甚至無法添加一個簡單的選項。
這是我的控制器代碼:
$scope.options = {
scaleLabel : function (label) {
if(Number(label)===1)
return 'State 1';
if(Number(label.value)===2)
return 'State 2';
if(Number(label.value)===3)
return 'State 3';
if(Number(label.value)===4)
return 'State 4';
}
};
$scope.series = ['Table 1'];
$scope.axis = [[1,2,3,3,4,2,1,2,3,4]];
$scope.myLabels= [1,2,3,4,5,6,7,8,9];
這是我的標記:
<br>
<canvas id="line" class="chart chart-line" chart-data="axis"
chart-labels="myLabels" chart-series="series" chart-options="options"
</canvas>
為了將你自己的標簽放在'y'軸上你必須使用刻度選項,刻度標簽只會修改整個軸的標簽,所以假設你要為y軸添加標簽,就像3000美元而不是3000美元。
你需要使用它。
ticks: {
callback: function(value, index, values) {
//your function here
}
}
在這個例子中,我想為每個值返回3個狀態,就像票務系統一樣。
$scope.options = {
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Estado'
},
ticks: {
min: 1,
max: 3,
stepSize: 1,
callback: function(value, index, values) {
if(value == 1){
var dasLabel='Ticket open';
}
if(value == 2){
var dasLabel='Attending ticket';
}
if(value == 3){
var dasLabel='issued resolved';
}
return dasLabel;
}
}
}] ,
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Hora'
}
}]
}
};
和你的標記
<canvas id="line" class="chart chart-line" chart-data="axis"
chart-labels="myLabels" chart-series="series" chart-options="options"
</canvas>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.