google-visualization - 谷歌图表纵轴整数

Question

我正在尝试配置一个谷歌柱形图来以整数显示垂直轴，但是当它显示一个小数字(例如 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'}}
          );
}

如果你去 google playground你会注意到轴标签是 0, 2.5, 5, 7.5, 10。通过向 vAxis 添加格式:'0'，它将只显示整数，所以我的标签变成了 0, 3, 5, 8, 10 . 但显然这并不理想，因为 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
    }
}

然后将网格线选项 (vAxis.gridlines) 设置为上述变量，将最大值设置为 newMax，将最小值设置为 newMin。这应该给你整数轴标签。

注意:如果您的数字非常小，则上述功能可能不起作用。该功能也未经过测试，因此请在您自己的时间对照一些示例进行检查，如果它无法正常工作，请告诉我。