三維高級圖/ Javascript中的餅圖

我需要在javascript中繪製三維餅圖。它應該看起來像下面這樣： - 3d Pie chart 三維高級圖/ Javascript中的餅圖

在Google圖表，amchart和jscharts中有各種各樣的示例，用於3D餅圖但沒有看起來像下面的圖像。

鏈接： - http://www.amcharts.com/demos/3d-pie-chart/

在PHP中，我發現一個解決方案在這裏http://www.advsofteng.com/doc/cdphpdoc/multidepthpie.htm但我想要的東西，帶氣泡提示的支持互動。

請爲此提出任何JavaScript庫。我喜歡用highcharts，但它甚至不支持簡單的3d餅圖。

謝謝，

2014-03-13 techgyani

1）我不知道任何JavaScript或PHP的解決方案，這將使圖形看起來像，有潤色的那個水平。2）儘管這幅圖很漂亮，但這種類型的圖表實際上是您可以選擇顯示數據的最糟糕方式。用漂亮的圖形打扮你的頁面會更好，並且在簡單，直接的圖表上顯示數據，並顯示它應該實際顯示的內容。 FWIW。 – jlbriggs

我同意透明度幾乎不可能建立在Javascript上。我只想顯示一個多層次的3D餅圖，如[Multidepth Pie]（http://www.advsofteng.com/doc/cdphpdoc/multidepthpie.htm）。使用[Pchart]（http://www.pchart.net/）我也能夠得到相同的輸出。問題在於它不像JS的對手那樣具有互動性。 – techgyani

遠遠看見文檔，我們現在正在研究3D走勢圖，請參閱：

編輯： 它已經與Highcharts 4.x的版本發佈，請參閱samples。

來源

2014-03-13 10:32:09

謝謝帕維爾。我認爲你正在取得很好的進展，並且多花點功夫就可以得到我想要的。 :-) – techgyani

它是Highcharts中最需求有的功能。我們不得不等待一段時間！

Does it support 3D pie chart?

但是，使用谷歌可視化API，你可以很容易做到這一點。 enter image description here

代碼

<html> 
    <head> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
     google.load("visualization", "1", {packages:["corechart"]}); 
     google.setOnLoadCallback(drawChart); 
     function drawChart() { 
     var data = google.visualization.arrayToDataTable([ 
      ['Task', 'Hours per Day'], 
      ['Work',  11], 
      ['Eat',  2], 
      ['Commute', 2], 
      ['Watch TV', 2], 
      ['Sleep', 7] 
     ]); 

     var options = { 
      title: 'My Daily Activities', 
      is3D: true, 
     }; 

     var chart = new google.visualization.PieChart(document.getElementById('piechart_3d')); 
     chart.draw(data, options); 
     } 
    </script> 
    </head> 
    <body> 
    <div id="piechart_3d" style="width: 900px; height: 500px;"></div> 
    </body> 
</html>

希望我幫你:)

來源

2014-03-13 04:50:01

感謝Amila這非常有幫助，但它看起來像Google圖表不支持餅圖中的多重深度。 – techgyani

Orson Charts for HTML5可以做3D餅圖（除此之外），但不會顯示在示例中顯示的多個級別（級別表示什麼？）。圖表可以以任意角度旋轉（請參閱），工具提示和鼠標事件支持正在進行中。

Sample pie chart

來源

2014-03-13 15:53:30

三維高級圖/ Javascript中的餅圖

回答

相關問題