javascript 如何在chart.js中为y轴分配对数刻度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30307801/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to assign a logarithmic scale to y axis in chart.js?
提问by Yeshvant Kumar Bhavnasi
var data1 = {
labels: JSON.parse('<?php echo JSON_encode($bioc_months);?>'),
datasets: [{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
data: 1000,
900,
90,
200,
1020
}, {
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
data: 600,
456,
20,
2,
900
]
};
var opt1 = {
canvasBordersWidth: 3,
canvasBordersColor: "#205081",
scaleOverride: true,
scaleSteps: 6,
scaleStepWidth: log2,
scaleStartValue: 0,
scaleLabel: "<%=value%>",
legend: true,
inGraphDataShow: true,
annotateDisplay: true,
inGraphDataShow: false,
annotateDisplay: true,
animationEasing: "easeOutBounce",
graphTitleFontSize: 18
};
var myBarChart1 = new Chart(ctx1).Bar(data1, opt1);
回答by user2722127
You can assign logarithmic scale to y-axis as below:
您可以为 y 轴指定对数刻度，如下所示：
yAxes: [{
scaleLabel: {
display: true,
labelString: 'LABEL',
},
type: 'logarithmic',
position: 'left',
ticks: {
min: 0.1, //minimum tick
max: 1000, //maximum tick
callback: function (value, index, values) {
return Number(value.toString());//pass tick values as a string into Number function
}
},
afterBuildTicks: function (chartObj) { //Build ticks labelling as per your need
chartObj.ticks = [];
chartObj.ticks.push(0.1);
chartObj.ticks.push(1);
chartObj.ticks.push(10);
chartObj.ticks.push(100);
chartObj.ticks.push(1000);
}
}]
回答by testname
http://www.chartjs.org/docs/#scales-logarithmic-scale
http://www.chartjs.org/docs/#scales-logarithmic-scale
Logarithmic Scale
The logarithmic scale is use to chart numerical data. It can be placed on either the x or y axis. As the name suggests, logarithmic interpolation is used to determine where a value lies on the axis.
对数刻度
对数刻度用于绘制数值数据。它可以放置在 x 或 y 轴上。顾名思义，对数插值用于确定值在轴上的位置。
回答by bvdb
As @user2722127 pointed out, the essence is to put the type on "logarithmic".
正如@user2722127 所指出的，本质是将类型放在"logarithmic".
If you only take care of that, then you will end up with awkward labels in scientific format (e.g. 200000 = "2e5"). I personally prefer them a little more human.
So, the callback method actually converts numericdata values to stringlabel values.
如果你只关心这一点，那么你最终会得到科学格式的笨拙标签（例如 200000 = "2e5"）。我个人更喜欢他们多一点人性。因此，回调方法实际上将numeric数据值转换为string标签值。
Note: the callback will not be called for all values in your dataset. It will just be called for the auto-generated ticks. In my case that was enough. Nevertheless, there may be too much labels. So to limit the number of labels, I simply return nullfor all unwanted label values.
注意：不会为数据集中的所有值调用回调。它只会被自动生成的滴答声调用。就我而言，这就足够了。然而，标签可能太多。所以为了限制标签的数量，我只是返回null所有不需要的标签值。
yAxes: [{
type: 'logarithmic',
ticks: {
min: 0,
max: 1000000,
callback: function (value, index, values) {
if (value === 1000000) return "1M";
if (value === 100000) return "100K";
if (value === 10000) return "10K;
if (value === 1000) return "1K";
if (value === 100) return "100";
if (value === 10) return "10";
if (value === 0) return "0";
return null;
}
}
}]
EDIT:
编辑：
The following is not strictly necessary, but may possibly improve performance.
以下不是绝对必要的，但可能会提高性能。
If you want more control on the created ticks, you can provide an afterBuildTicksproperty. ( Which is very similar to what is provided in the answer of @user2722127 .) In this example, it just replaces the content of the ticks array of the chart object with different ticks.
如果您想对创建的刻度进行更多控制，您可以提供一个afterBuildTicks属性。（这与@user2722127 的回答中提供的非常相似。）在这个例子中，它只是用不同的刻度替换图表对象的刻度数组的内容。
afterBuildTicks = (chartObj) => {
const ticks = [1, 10, 100, 1000, 10000, 100000, 1000000];
chartObj.ticks.splice(0, chartObj.ticks.length);
chartObj.ticks.push(...ticks);
}
You just add this function as a property to the yAxiselement, along with the other properties.
您只需将此函数作为属性yAxis与其他属性一起添加到元素中即可。
yAxes: [{
type,
ticks,
afterBuildTicks
}]
