谷歌图表整数的垂直轴

Question

我正在尝试配置Google柱形图以整数显示垂直轴,但是当它显示一个小数字(例如1)时,它也显示0.25,0.50等.

反正有改变吗？我一直在阅读文档,找不到任何相关的内容.

谢谢

Answer 1

简单回答:是的,但它很复杂.

如果您只想将数字显示为整数,那么很容易:

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'}}
          );
}

如果你去谷歌游乐场你会注意到轴标签是0,2.5,5,7.5,10.通过将格式:'0'添加到vAxis,它将只显示整数,所以我的标签变为0,3但是,显然这并不理想,因为8显示为介于5和10之间,但事实并非如此,因为数字实际上是7.5并且只是圆整.

您更改轴刻度/标签的能力受到限制.而要做你所要求的将采取一些特殊的javascript来创建一个适当的规模和数量的网格线,以防止打破时髦的数字.

基本上,您需要确保最大值和最小值以及网格线数量允许轻松划分,以便您只获得整数.要做到这一点,你需要创建一些时髦的新逻辑.下面是一些示例代码,可以让您获得适当的最小/最大轴值:

// 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;

这里有几个问题(不幸的是).首先是我使用网格线的数量来确定最小/最大值 - 你想要弄清楚你应该使用多少网格线来使用漂亮的整数.我认为,最简单的方法是如下(仅限伪代码):

// 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
    }
}

然后将gridlines选项(vAxis.gridlines)设置为上面的变量,将max设置为newMax,将min设置为newMin.这应该给你整数轴标签.

注意:如果您的数字非常小,则上述功能可能无效.该功能也未经过测试,因此请根据您自己的时间查看一些示例,并告知我它是否无法正常工作.

Answer 2

只是添加到jmac的答案.如果您知道图表的最大值,则解决方案更容易设置,maxvalue您可以确保网格线始终显示相同的数字.

如果你的内容非常动态,那么他的解决方案似乎是唯一的.