我如何修改 angular 图表 js 中的刻度标签？

Question

我正在尝试在 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>

Answer 1

为了在 'y' 轴上放置您自己的标签，您必须使用刻度选项，比例标签只会修改整个轴的标签，假设您要添加一个y 轴的标签，例如 3000 美元而不是 3000 美元。

你需要用到这个。

 ticks: {
                    callback: function(value, index, values) {
 //your function here
     }
}

在这个例子中，我想 return 每个值有 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>

我如何修改 angular 图表 js 中的刻度标签？

how can i modify scale labels in angular chart js?

javascript

angularjs

chart.js

angular-chart