谷歌图表纵轴在整个数字 [英] Google Charts vertical axis in whole numbers
问题描述
我试图配置一个Google柱状图来显示整个数字中的垂直轴，但是当它显示一个小数字（如1）时，它也会显示0.25,0.50等等。
有反正改变这个吗？
谢谢
如果您只想将数字显示为整数，那么很容易：
pre $ function drawVisualization（）{
//创建并填充数据表。
var data = google.visualization.arrayToDataTable（[
['x'，'Cats'，'Blanket 1'，'Blanket 2']，
['A'，1，1 ，0.5]，
['B'，2,0.5,1]，
['C'，4,1,0.5]，
['D'，8,0.5,1 ]，
['E'，7,1,0.5]，
['F'，7,0.5,1]，
['G'，8,1,0.5]，
['H'，4,0.5,1]，
['I'，2,1,0.5]，
['J'，3.5,0.5,1]，
['K'，3,1,0.5]，
['L'，3.5,0.5,1]，
['M'，1,1，0.5]，
['N'，1,0.5,1]
]）;
//创建并绘制可视化文件。
new google.visualization.LineChart（document.getElementById（'visualization'））。
draw（data，{curveType：function，
width：500，height：400，
vAxis：{maxValue：10，format：'0'}}
） ;
}
如果您转到 google playground ，您会注意到轴标签为0,2.5,5,7.5,10。通过添加格式：'0'到vAxis，它将只显示整数，所以我的标签变成0,3,5,8,10。但显然这不是理想的，因为8显示为5和10之间的一半， t，因为这个数字实际上是7.5，只是四舍五入。
您可以更改轴刻度/标签的能力受到限制。要做你要问的东西，需要一些特殊的javascript来创建合适的网格线和数量的网格线，以防止把事情弄糟到简单的数字。
基本上，你想确保你的最大值和最小值以及网格线的数量可以很容易地区分，这样你只能得到整数。要做到这一点，你需要创建一些时髦的新逻辑。以下是一些示例代码，可以让您获得适当的最小/最大轴值：
//以最大/最小值所有图中所有数据值的总和
var totalMax = 345;
var totalMin = -123;
//找出最大数目（正数或负数）
var maximumNumber = Math.max（Math.abs（totalMax），Math.abs（totalMin））;
//取整为10的指数适用于最大数字
var roundingExp = Math.floor（Math.log（largestNumber）/ Math.LN10）;
var roundingDec = Math.pow（10，roundingExp）;
//将您的最大值和最小值舍入为10
的最接近的指数var newMax = Math.ceil（totalMax / roundingDec）* roundingDec;
var newMin = Math.floor（totalMin / roundingDec）* roundingDec;
//确定数值的范围
var range = newMax - newMin;
//定义网格线的数量（默认5）
var gridlines = 5;
//确定网格线之间的适当间隔
var interval = range /（gridlines - 1）;
//将该间隔舍入到指数10
var newInterval = Math.ceil（interval / roundingDec）* roundingDec;
//将您的最大值和最小值重新设置为新的时间间隔
var finalMax = Math.ceil（totalMax / newInterval）* newInterval;
var finalMin = Math.floor（totalMin / newInterval）* newInterval;
这里有几个问题（不幸的是）。首先，我正在使用网格线的数量来确定最小/最大值 - 您想知道应该使用多少网格线才能使用漂亮的整数。我认为最简单的方法如下（仅限于伪代码）：
//以最大值/所有图中所有数据值的最小值
var totalMax = 3;
var totalMin = -1;
//找出最大数目（正数或负数）
var maximumNumber = Math.max（Math.abs（totalMax），Math.abs（totalMin））;
//取整为10的指数适用于最大数字
var roundingExp = Math.floor（Math.log（largestNumber）/ Math.LN10）;
var roundingDec = Math.pow（10，roundingExp）;
//将您的最大值和最小值舍入为10
的最接近的指数var newMax = Math.ceil（totalMax / roundingDec）* roundingDec;
var newMin = Math.floor（totalMin / roundingDec）* roundingDec;
//确定数值的范围
var range = newMax - newMin;
//计算网格线数量的最佳因子（2-5个网格线）
//如果数字范围除以2或5为整数，则使用它$ b $对于（var i = 2; i <= 5; ++ i）{
if（Math.round（range / i）= range / i）{
var gridlines = i
}
}
然后您将网格线选项（vAxis.gridlines）设置为上述变量，你的最大值到newMax，你的最小值到newMin。这应该给你整个号码的轴标签。
注意：如果您的号码非常小，那么上述功能可能不起作用。该功能也没有经过测试，所以请在您自己的时间查看一些例子，并告诉我它是否无法正常工作。
I am trying to configure a Google column chart to display the vertical axis in whole numbers but when it is displaying a small number such as 1 it displaying 0.25, 0.50 etc as well.
Is there anyway to change this? I have been through the documentation and can't find anything that seems relevant.
Thanks
Simple answer: yes, but it's complicated.
If you just want numbers to display as whole numbers, then it's easy:
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['x', 'Cats', 'Blanket 1', 'Blanket 2'],
['A', 1, 1, 0.5],
['B', 2, 0.5, 1],
['C', 4, 1, 0.5],
['D', 8, 0.5, 1],
['E', 7, 1, 0.5],
['F', 7, 0.5, 1],
['G', 8, 1, 0.5],
['H', 4, 0.5, 1],
['I', 2, 1, 0.5],
['J', 3.5, 0.5, 1],
['K', 3, 1, 0.5],
['L', 3.5, 0.5, 1],
['M', 1, 1, 0.5],
['N', 1, 0.5, 1]
]);
// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {curveType: "function",
width: 500, height: 400,
vAxis: {maxValue: 10, format: '0'}}
);
}
If you go to google playground you will note that the axis labels are 0, 2.5, 5, 7.5, 10. By adding the format: '0' to the vAxis, it will display only whole numbers, so my labels become 0, 3, 5, 8, 10. But obviously this is not ideal since 8 displays as being halfway between 5 and 10, which it isn't, because the number is actually 7.5 and just being rounded.
Your ability to change the axis scale/labels is restricted. And to do what you're asking would take a special bit of javascript to create an appropriate scale and number of gridlines to prevent breaking things down in to funky numbers.
Basically, you want to make sure that your maximum and minimum values, and number of gridlines, allow for easy division such that you will only get whole numbers. To do that, you need to create some funky new logic. Here is some sample code that will allow you to get an appropriate min/max axis value:
// Take the Max/Min of all data values in all graphs
var totalMax = 345;
var totalMin = -123;
// Figure out the largest number (positive or negative)
var biggestNumber = Math.max(Math.abs(totalMax),Math.abs(totalMin));
// Round to an exponent of 10 appropriate for the biggest number
var roundingExp = Math.floor(Math.log(biggestNumber) / Math.LN10);
var roundingDec = Math.pow(10,roundingExp);
// Round your max and min to the nearest exponent of 10
var newMax = Math.ceil(totalMax/roundingDec)*roundingDec;
var newMin = Math.floor(totalMin/roundingDec)*roundingDec;
// Determine the range of your values
var range = newMax - newMin;
// Define the number of gridlines (default 5)
var gridlines = 5;
// Determine an appropriate gap between gridlines
var interval = range / (gridlines - 1);
// Round that interval up to the exponent of 10
var newInterval = Math.ceil(interval/roundingDec)*roundingDec;
// Re-round your max and min to the new interval
var finalMax = Math.ceil(totalMax/newInterval)*newInterval;
var finalMin = Math.floor(totalMin/newInterval)*newInterval;
There are a couple issues here (unfortunately). The first is that I am using the number of gridlines to determine the min/max values -- you want to figure out how many gridlines you should have to use nice whole numbers. The easiest way to do this, I think, would be as follows (pseudo-code only):
// Take the Max/Min of all data values in all graphs
var totalMax = 3;
var totalMin = -1;
// Figure out the largest number (positive or negative)
var biggestNumber = Math.max(Math.abs(totalMax),Math.abs(totalMin));
// Round to an exponent of 10 appropriate for the biggest number
var roundingExp = Math.floor(Math.log(biggestNumber) / Math.LN10);
var roundingDec = Math.pow(10,roundingExp);
// Round your max and min to the nearest exponent of 10
var newMax = Math.ceil(totalMax/roundingDec)*roundingDec;
var newMin = Math.floor(totalMin/roundingDec)*roundingDec;
// Determine the range of your values
var range = newMax - newMin;
// Calculate the best factor for number of gridlines (2-5 gridlines)
// If the range of numbers divided by 2 or 5 is a whole number, use it
for (var i = 2; i <= 5; ++i) {
if (Math.round(range/i) = range/i) {
var gridlines = i
}
}
Then you set the gridlines option (vAxis.gridlines) to the above variable, and your max to newMax, and your min to newMin. That should give you whole number axis labels.
Note: if your numbers are really small then the above function may not work. The function is also not tested so please check it against some examples on your own time and let me know if it doesn't work properly.
这篇关于谷歌图表纵轴在整个数字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
