使用任何Javascript圖表庫，是否可以在某些X上顯示不透明度的數據？

-2

使用谷歌圖表，我試圖顯示一個線條圖，它會顯示一條線，它可以在某個X軸上顯示多條線，每條線都帶有不透明度：0.5。使用任何Javascript圖表庫，是否可以在某些X上顯示不透明度的數據？

當客戶將鼠標懸停在特定線路上時，此線路將變爲不透明：1，並提供用戶正在查看的線路反饋。

其背後的主要思想是爲線圖顯示未來數據的投影。到現在爲止的所有數據都是確定的，所以它們不會改變，但在「今天」之後，我們將根據不同的估計顯示3條不同的線。

到目前爲止，我來到了這個結果（https://jsfiddle.net/7nk1odsy/）使用谷歌圖表：

google.charts.load('current', {'packages':['corechart']}); 
google.charts.setOnLoadCallback(drawChart); 

function drawChart() { 
    var data = google.visualization.arrayToDataTable([ 
    ['Year', 'Sales', { "type": "string", "role": "style" }, 'Forecast 1', { "type": "string", "role": "style" }, 'Forecast 2', { "type": "string", "role": "style" }], 
    ['2004', 1000, 'opacity: 1;',  null, 'opacity: 1;',  null, 'opacity: 1;'], 
    ['2005', 1170, 'opacity: 1;',  null, 'opacity: 1;',  null, 'opacity: 1;'], 
    ['2006', 660, 'opacity: 1;',  660, 'opacity: 0;',  660, 'opacity: 0;'], 
    ['2007', null, 'opacity: .3;',  540, 'opacity: .3;',  720, 'opacity: .3;'] 
    ]); 

    var options = { 
    title: 'Company Performance', 
    legend: { position: 'bottom' }, 
    dataOpacity: 0.5 
    }; 

    var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); 

    chart.draw(data, options); 
}

但徘徊線的時候它缺少透明度的變化爲1，理想情況下，改變了全線（甚至第一線），使它看起來像是一個完整的線。

我該怎麼做？

來源

2017-02-20 Cyril N.

是的。並通過編程。 – Shilly

哇，SO社區每天都在變得更好！ –

你有16k代表，你應該知道，如果你根本不顯示任何代碼，甚至沒有一個數據樣本來處理，你的問題將得不到答案。 – Shilly

如果您有時間學習D3（數據驅動文檔）。這是一個非常強大的開源免費圖表庫。過去幾個月我一直在使用它，它可以做你想問的問題。這裏是homepage。如果您只是製作折線圖或多個折線圖，則不需要太長時間才能完成此工作。這是我用來學習基礎知識的free book。

來源

2017-02-20 15:45:38 redstylee

感謝您的留言。我只知道D3的名字（從來沒有直接測試過）。我希望找到一個像ChartJS或Google Chart這樣的好圖書館，這些圖書館已經能夠提供我一直在尋找的東西。 –

1）還沒有找到確切的解決方案，但以下可以幫助你。

我們可以用css來定位svg的片段，所以我們可以使用懸停效果來爲線條着色。棘手的部分是獲得正確的元素。唉，圓形彈出窗口和路徑不在同一個容器中，所以導航很難。

如果圓是目標，則circle.parentNode.parentNode.previousSibling爲您提供包含該線的<g>元素包裝。從那裏它是第x個孩子，x是圈子的孩子指數。

通過這種方式，在技術上可以導航到正確的行並對其進行重新設置。所以有一種可能性是在線/圓上添加一個鼠標懸停處理程序並從那裏導航到另一個。

2）的CSS部分：

/* svg > g > g > g > path (exact path) */ 
svg path:hover { 
    stroke-opacity: 1; 
}

如果線與鼠標懸停這將線的不透明度設置爲1。棘手的部分再次進入圓圈終點。但是這可以通過draw函數中使用的選項對象來解決。

3）深入瞭解線條圖的註釋選項等。

我試過一些變化，但還沒有找到確切的解決方案。

https://developers.google.com/chart/interactive/docs/gallery/linechart#configuration-options

X）可以想像，我們可以通過具有CSS顏色線條的透明度，將所有上述情況，則也有上線鼠標懸停處理程序，將抓住正確的圈，然後手動在圓上觸發鼠標懸停，這樣我們就可以使用註釋選項觸發我們可以做出的更改。

除非有一些繪製選項，我錯過了，這是我唯一的atm想法，以確切地得到OP descibes。

來源

2017-02-20 16:52:53 Shilly

謝謝您的深度搜索。正如你所看到的，找到一個可行的解決方案並不容易，這就是爲什麼我認爲StackOverflow是最適合尋求這種幫助的地方。我的錯誤是給圖書館的選擇權。我會看到你的答案，並回到你身邊:) –

爲了您的信息，使用您的答案作爲基地，我能夠重現此代碼：https：//jsfiddle.net/7nk1odsy/2/。從我的角度來看，它在盤旋紅色/橙色的時候缺少了「發光」藍線的可能性，如果我爲「預測」列添加值而不是空值，那麼藍線將採用這些值而不是「銷售「欄（當懸停點時）。 –

使用任何Javascript圖表庫，是否可以在某些X上顯示不透明度的數據？

回答

相關問題