[英]Turn a stacked column google chart into a waterfall chart
我一直在研究使用Google圖表復制瀑布圖的項目。 我設法有2個系列的堆疊列,其中第一個系列是透明的,因此第二個可見系列似乎是浮動的,就像瀑布圖一樣。 問題在於,第一個透明系列保持交互性,並在鼠標懸停時突出顯示,並顯示標簽和注釋。 您能幫我弄清楚如何停止檢測第一列序列。
我發現有人已經完成了此任務,但他們沒有提及如何完成此任務。 http://data-ink.com/?p=612 。
這是代碼的數據部分:
var data = google.visualization.arrayToDataTable([
['Genre', 'Label1', { role: 'annotation', role:'style' }, 'Label2', { role: 'annotation', role:'style' } ],
['column1', 5, 'opacity: 0.2', 11, 'opacity: 0.2'],
['column2', 5, 'opacity: 0.2', 12, 'opacity: 0.2'],
['column3', 5, 'opacity: 0.2', 13, 'opacity: 0.2'],
['column4', 5, 'opacity: 0.2', 14, 'opacity: 0.2'],
['column5', 5, 'opacity: 0.2', 15, 'opacity: 0.2'],
['column6', 5, 'opacity: 0.2', 26, 'opacity: 0.2']
]);
這是R3tep所提供的jsFiddle,他回答了我的不透明性問題。 請注意,此后我將3系列減少為2。
在所需系列上使用選項enableInteractivity: false
。
series:{0: {enableInteractivity: false}} // Serie 0 is the first serie in your array declaration
並將不透明度設置為零:
var data = google.visualization.arrayToDataTable([
['Genre', 'Label1', {
role: 'annotation',
role: 'style'
}, 'Label2', {
role: 'annotation',
role: 'style'
}],
['column1', 5, 'opacity: 0', 11, 'opacity: 0.2'],
['column2', 5, 'opacity: 0', 12, 'opacity: 0.2'],
['column3', 5, 'opacity: 0', 13, 'opacity: 0.2'],
['column4', 5, 'opacity: 0', 14, 'opacity: 0.2'],
['column5', 5, 'opacity: 0', 15, 'opacity: 0.2'],
['column6', 5, 'opacity: 0', 26, 'opacity: 0.2']
]);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.