我正在尝试在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>
答案 0 :(得分:0)
为了将自己的标签放在&#39; y&#39;你需要使用刻度选项,刻度标签只会修改整个轴的标签,所以我们假设你要为y轴添加一个标签,比如3000 $而不是3000。 / p>
你需要使用它。
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>