Chart.js – 格式化Y轴

我使用Chart.js来绘制一个简单的条形图，我需要格式化它的Y轴

123456.05至123 456,05 $

我不明白如何使用scaleLabel : "<%=value%>"

我看到有人指着 “ JS Micro-Templating ”
但不知道如何使用我们的scaleLabel选项。

有人知道如何格式化这个Y轴，也许给我一个例子？

Answer 1

ChartJS库的一个未公开的function是，如果你传入一个函数而不是一个string，它将使用你的函数来渲染y轴的scaleLabel。

所以虽然"<%= Number(value).toFixed(2).replace('.',',') + ' $' %>"作用，你也可以：

 scaleLabel: function (valuePayload) { return Number(valuePayload.value).toFixed(2).replace('.',',') + '$'; } 

如果你做的任何事情都很复杂，我build议你这样做。

Answer 2

我有同样的问题，我认为在Chart.js 2.xx的方法是略有不同，如下所示。

 ticks: { callback: function(label, index, labels) { return label/1000+'k'; } } 

更多细节

 var options = { scales: { yAxes: [ { ticks: { callback: function(label, index, labels) { return label/1000+'k'; } }, scaleLabel: { display: true, labelString: '1k = 1000' } } ] } } 

Answer 3

 scaleLabel : "<%= Number(value).toFixed(2).replace('.', ',') + ' $'%>" 

Answer 4

正如Nevercom所说，scaleLable应该包含javascript，所以操纵y值只需要应用所需的格式。

请注意该值是一个string。

 var options = { scaleLabel : "<%= value + ' + two = ' + (Number(value) + 2) %>" }; 

jsFiddle的例子

如果你想设置手动y比例，你可以使用scaleOverride

 var options = { scaleLabel : "<%= value + ' + two = ' + (Number(value) + 2) %>", scaleOverride: true, scaleSteps: 10, scaleStepWidth: 10, scaleStartValue: 0 }; 

jsFiddle的例子

Answer 5

在这里你可以find如何格式化Y轴值的一个很好的例子。

另外，你可以使用scaleLabel : "<%=value%>"你提到的scaleLabel : "<%=value%>" ，它基本上意味着<%=和%>标签之间的所有内容都被当作javascript代码处理（也就是说，如果使用stats …）