谷歌可視化將0軸與兩個不同的y軸對齊

我正在用谷歌的可視化庫創建一個combochart。我在一天內製定了商店的流量和收入。我已將我的抽獎選項設置爲谷歌可視化將0軸與兩個不同的y軸對齊

var options = { 
    seriesType: "bars", 
    series:{0:{targetAxisIndex:0},1:{targetAxisIndex:1}}, 
    vAxes:{0:{title: "Revenue"},1:{title: "Traffic"}}, 
    hAxis: {title: "Time", showTextEvery: 1}, 
};

它在與流量不同的Y軸上設置收入。對這些數據的樣本可能是這樣的：

var data = [ 
    // Time  Revenue Traffic 
    ['10:00-10:30', '132.57', '33'], 
    ['10:30-11:00', '249.23', '42'], 
    ['11:00-11:30', '376.84', '37'], 
    [... etc ..] 
];

我遇到的問題是，流量值將始終是積極的，而收入可能是一個負數，如果有回報。如果發生這種情況，我的收入軸將從負值開始，如-50，而流量從0開始，水平基線不排隊。我想這樣做，即使Revenue的值小於0，0軸也會與Traffic 0軸對齊。

下面是一個示例，顯示發生了什麼。瞭解Traffic 0軸如何與收入-50軸處於同一水平。我想知道如何將交通基線提高到與收入0軸相同的水平。 enter image description here

來源

2013-10-15 Devin Crossman

我有我有理由一定總是會產生軸的值具有相同的0點（我還沒有證明的方法，它不能產生軸具有不同的0點，但我還沒有遇到任何）。

要開始了，得到兩個日期序列的範圍（對我們而言，第1欄是「收入」和第2列是「交通」）：

var range1 = data.getColumnRange(1); 
var range2 = data.getColumnRange(2);

對於每個系列，獲得最大系列的值，如果max小於或等於0，則爲1.這些值將用作圖表的上限。

var maxValue1 = (range1.max <= 0) ? 1 : range1.max; 
var maxValue2 = (range2.max <= 0) ? 1 : range2.max;

然後計算標量值與所述兩個上界：

var scalar = maxValue2/maxValue1;

現在，通過利用range1.min和0下計算出「收入」系列的下界：

var minValue1 = Math.min(range1.min, 0);

然後將該下限乘以標量值以獲得「交通」系列的下限：

var minValue2 = minValue1 * scalar;

最後，設置各軸vAxis minValue（最小值）/包括maxValue選項：

vAxes: { 
    0: { 
     maxValue: maxValue1, 
     minValue: minValue1, 
     title: 'Revenue' 
    }, 
    1: { 
     maxValue: maxValue2, 
     minValue: minValue2, 
     title: 'Traffic' 
    } 
}

淨結果是，每一個系列的正和負的比例是相等的（maxValue1/(maxValue1 - minValue1 == maxValue2/(maxValue2 - minValue2和minValue1/(maxValue1 - minValue1 == minValue2/(maxValue2 - minValue2），這意味着該圖表軸應該以相同的正負比例結束，在兩側排列0。

這是一個jsfiddle這個工作：http://jsfiddle.net/asgallant/hvJUC/。它應該適用於任何數據集，只要第二個數據系列沒有負值。我正在研究可以處理任何數據集的版本，但這應該足以滿足您的使用情況。

來源

2013-10-15 18:05:15 asgallant

雖然不完全一樣，但這裏有一個獲取最大/最小值的圓整數字的函數，它還處理底片：http://stackoverflow.com/questions/14440231/google-charts-vertical-axis-in -whole-numbers/14472345＃14472345 – jmac

這正是我需要的，謝謝！ –

谷歌可視化將0軸與兩個不同的y軸對齊

回答

相關問題