我正在使用ChartJS插件，我从y轴获得了一些意想不到的结果。它为高数字提供了方法。
我得到了一些随机数字，你可以得到最高的数字是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"
});
});
答案 0 :(得分：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 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>
答案 1 :(得分：0)
我用一些额外的JS快速构建了动态高度图表。
见JSfiddle：http://jsfiddle.net/ux1zxj2w/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"]
}]
}
// find out max value of both data sets
// todo: loop over data sets when using a dynamic number of datasets
all_data = data.datasets[0].data.concat(data.datasets[1].data);
max = Math.max.apply(Math, all_data);
max_chart = max * 1.01 // +1%
max_chart = Math.round(max_chart / 10) * 10; //round to 10
$(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",
scaleOverride : true,
scaleSteps : 10,
scaleStepWidth : max_chart/10,
scaleStartValue : 0
});
});