Question

如何在google折线图中设置vAxis值格式，以便不会获得具有相同值的多行？假设我有值的行：1.5 1.0 0.5和0，在我将格式设置为'＃'后，我得到0,0,1,1 ......

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] [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
    }
}
然后将gridlines选项（vAxis.gridlines）设置为上面的选项   变量，你的max到newMax，你的min到newMin。那应该   给你整数轴标签。

注意：如果您的数字非常小，那么上述功能可能不会   工作。该功能也没有经过测试，所以请检查一下   你自己的时间的例子，让我知道它是否无法正常工作。

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

在Google折线图中设置vAxis格式

1 个答案: