1

如何在谷歌折线图中设置 vAxis 值格式，以免获得具有相同值的多条线？假设我有值的行：1.5 1.0 0.5 和 0，在我将格式设置为“#”后，我得到了 0、0、1、1...

4

1 回答 1

0

此问题可能重复

复制粘贴答案：

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

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][1] 你会注意到轴标签是 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) 设置为上述变量，将 max 设置为 newMax，将 min 设置为 newMin。那应该给你整数轴标签。

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

[1]： http ://code.google.com/apis/ajax/playground/?type=visualization#line_chart

于 2013-03-02T12:12:28.273 回答