javascript - Google折れ線グラフでのvAxis形式の設定

Question

同じ値の複数の線を取得しないように、Google折れ線グラフでvAxis値の形式を設定するにはどうすればよいですか？値が1.51.00.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;

ここにはいくつかの問題があります（残念ながら）。1つ目は、グリッド線の数を使用して最小/最大値を決定していることです。つまり、適切な整数を使用する必要があるグリッド線の数を把握する必要があります。これを行う最も簡単な方法は、次のようになると思います（擬似コードのみ）。

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