javascript - y 轴值太高

Question

我正在使用 ChartJS 插件，并且从 y 轴得到了一些意外的结果。它呈现出很高的数字。

DEMO

我得到了一些随机数，如您所见，最高数字是 11260578，但它最多呈现 20000000。有没有办法将其限制为最高数字 + 1+%？

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July", "January", "February", "March", "April", "May", "June", "July", "June", "July"],
    datasets: [{
        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: ["290117", "350289", "2564303", "789082", "2545431", "764093", "512736", "11260578", "434955", "732576", "4194658", "596969", "1036631", "438442", "949191", "1008840"]
    }, {
        fillColor: "rgba(151,187,205,0.5)",
        strokeColor: "rgba(151,187,205,0.8)",
        highlightFill: "rgba(151,187,205,0.75)",
        highlightStroke: "rgba(151,187,205,1)",
        data: ["290117", "350289", "2564303", "789082", "2545431", "764093", "512736", "11260578", "434955", "732576", "4194658", "596969", "1036631", "438442", "949191", "1008840"]
    }]

}
$(function () {
    var canvas = $('.chart-canvas').get(0).getContext("2d");
    var salesChart = new Chart(canvas).Bar(data, {
        responsive: true,
        scaleShowVerticalLines: true,
        scaleBeginAtZero: false,
        scaleFontSize: 15,
        scaleFontStyle: "bold",
        scaleFontFamily: "Arial"
    });
});

Answer 1

如果您想要一个看起来更清晰的刻度，您可以使用对数数学。通过将最大值四舍五入到最接近的百万，比例将变为:

• 最小 -> 0
• 最大 -> 12000000
• 步数 -> 1200000

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July", "January", "February", "March", "April", "May", "June", "July", "June", "July"],
    datasets: [{
        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: ["290117", "350289", "2564303", "789082", "2545431", "764093", "512736", "11260578", "434955", "732576", "4194658", "596969", "1036631", "438442", "949191", "1008840"]
    }, {
        fillColor: "rgba(151,187,205,0.5)",
        strokeColor: "rgba(151,187,205,0.8)",
        highlightFill: "rgba(151,187,205,0.75)",
        highlightStroke: "rgba(151,187,205,1)",
        data: ["290117", "350289", "2564303", "789082", "2545431", "764093", "512736", "11260578", "434955", "732576", "4194658", "596969", "1036631", "438442", "949191", "1008840"]
    }]
};

function flattenData(data, root, property) {
    return data[root].reduce(function (result, value) {
        return result.concat(value[property]);
    }, []);
}

// Find the maximum value in a list of data.
function calculateMax(data) {
    return Math.max.apply(Math, data);
}

// The number of digits can be counted either by the length
// of the number string (fastest way in JavaScript) or the
// log10 value (the mathematical way).
function digitCount(n, fastCalculate) {
    return fastCalculate ?
        n.toString().length :
        Math.floor(Math.log(n) / Math.log(10)) + 1;
}

// The magnitude of the value n in logarithmic scale.
function magnitude(n) {
    return Math.pow(10, digitCount(n));
}

// Logarithmically round a number.
function roundLog(n, precision) {
    var mag = magnitude(n);
    var pre = mag / Math.pow(10, precision);
    var scale = mag / pre;
    var base = Math.floor(n / scale) + 1;
    return base * scale;
}

// Round a number to the second most significant digit.
function roundMax(n) {
  return roundLog(n, digitCount(n) - 2 || 1);
}

// Maximum value in all the datasets, rounded to the nearest million.
var yMax = roundMax(calculateMax(flattenData(data, 'datasets', 'data')));

$(function () {
    var ctx = $('.chart-canvas').get(0).getContext("2d");
    var salesChart = new Chart(ctx).Bar(data, {
        responsive: false, // Turned this off to display on Stack Overflow
        scaleShowVerticalLines: true,
        scaleBeginAtZero: false,
        scaleFontSize: 15,
        scaleFontStyle: "bold",
        scaleFontFamily: "Arial",
        scaleOverride: true,
        scaleSteps: 10,
        scaleStepWidth: yMax / 10,
        scaleStartValue: 0
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>

<canvas class="chart-canvas" height="280" width="540"></canvas>