私のウェブサイトにグーグルチャートがあります。それは線グラフです。ただし、Y軸のデータ値は整数でしか増加しないため、次のようにY軸に「4.5」の値を設定したくありません。
誰かが私を正しい方向に向けることができれば、私はそれを感謝します!
私のウェブサイトにグーグルチャートがあります。それは線グラフです。ただし、Y軸のデータ値は整数でしか増加しないため、次のようにY軸に「4.5」の値を設定したくありません。
誰かが私を正しい方向に向けることができれば、私はそれを感謝します!
次のパラメータgridlines:{count}
で遊ぶ必要があります。例:
hAxis: {
minValue: 1.00,
maxValue: 5.00,
baseline: 3.00,
viewWindowMode:'explicit',
viewWindow:
{
max: 5.00,
min: 1.00
},
gridlines:{count:11}
},
vAxis: {
minValue: 1.00,
maxValue:5.00,
baseline:3.00,
viewWindowMode:'explicit',
viewWindow:
{
max:5.00,
min:1.00
},
gridlines:{count:11}
}
この質問はすでにここで回答されています。
そしてこれはそれが言うことです:
数値を整数として表示したいだけなら、簡単です。
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であることに気付くでしょう。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