Chart.js number Y-AXIS label format for many decimal places

Question

我在 chart.js Y 轴标签方面遇到问题。我有以下数据。

var data = {
labels: ["1","2","3","4","5"],
datasets: [
    {
        label: "My First dataset",
        fillColor: "rgba(220,220,220,0.5)",
        strokeColor: "rgba(220,220,220,0.8)",
        highlightFill: "rgba(220,220,220,0.75)",
        highlightStroke: "rgba(220,220,220,1)",
        data: [0.15000000000000088,0.15000000000000133,0.15000000000000177,0.15000000000000221,0.15000000000000308]
    },
]
};

我得到了这个结果。

Image of the Graph Result

如您所见，Y 轴上的标签在小数点后第五位被截断。如何在 Y 轴标签中显示我的数据的所有小数位？

TIA。

Answer 1

尝试将图表配置中的 scaleStepWidth 值更改为与您的值之间的差异一样小的值。这也应该影响刻度上显示的小数位数，如 github.

上 Chart.js 源文件中的 Chart.Core.js 文件所示

new Chart(ctx).Bar(datasets, {scaleStepWidth : 0.00000000000000050});

Answer 2

试试这个

var data = {
labels: ["1","2","3","4","5"],
datasets: [
    {
        label: "My First dataset",
        fillColor: "rgba(220,220,220,0.5)",
        strokeColor: "rgba(220,220,220,0.8)",
        highlightFill: "rgba(220,220,220,0.75)",
        highlightStroke: "rgba(220,220,220,1)",
        data: [15000000000000088,15000000000000133,15000000000000177,15000000000000221,15000000000000308]
    },
]
};

// create chart
var ctx = document.getElementById("radaranalytics").getContext('2d');
var radar = new Chart(ctx).Bar(data, {
  scaleBeginAtZero: false,
  scaleLabel: "<%=value/100000000000000000%>",
  tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value/100000000000000000 %>",
});

Fiddle - https://jsfiddle.net/2g794kxh/

请注意，图表中的值将超出限制进行四舍五入。有关详细信息，请参阅。

如果您想避免这种情况，最好的办法是将比例/值的静态部分视为字符串，即您的数据为 88、133、177 等，您的比例/值前缀为0.150000.......

Answer 3

自从提出问题以来，这可能已经改变，但现在这似乎是首选方法：

var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
    scales: {
        yAxes: [{
            ticks: {
                // Include a dollar sign in the ticks
                callback: function(value, index, values) {
                    return '$' + value;
                }
            }
        }]
    }
}
});

http://www.chartjs.org/docs/latest/axes/labelling.html#creating-custom-tick-formats

Chart.js number Y-AXIS label format for many decimal places

Chart.js number Y-AXIS label format for many decimal places

javascript

labels

chart.js