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

试试这个

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 %>",
});

小提琴 - https://jsfiddle.net/2g794kxh/

请注意，图表中的值会超出限制范围。有关详细信息，请参阅https://stackoverflow.com/a/30373552/360067。

如果你想避免你最好的选择是将你的比例/值的静态部分视为一个字符串，即你的数据将是88,133,177等，你的比例/值前缀将是0.150000。 ....

Answer 2

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

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

Answer 3

尝试将图表配置中的scaleStepWidth值更改为小于值之间差异的值。这也应该影响比例上显示的小数位数，如github上Chart.js源中的Chart.Core.js文件所示。

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

Chart.js编号为许多小数位的Y-AXIS标签格式

3 个答案: