在Highcharts / Javascript中的3D饼图

时间:2014-03-13 04:40:59

标签: javascript highcharts amcharts jscharts

我需要在javascript中绘制三维饼图。它应该如下所示: - 3d Pie chart

Google图表中有各种示例,amcharts和jscharts用于3d饼图,但没有一个看起来像下面的图像。

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

在PHP中,我在这里找到了一个解决方案http://www.advsofteng.com/doc/cdphpdoc/multidepthpie.htm,但我希望通过工具提示支持进行交互。

请为此推荐任何javascript库。我喜欢使用highcharts,但它甚至不支持简单的3D饼图。

谢谢,

3 个答案:

答案 0 :(得分:4)

好吧,我们现在正在开发3D图表,请参阅:

修改 它已经与Highcharts 4.x版本一起发布,请参阅samples

答案 1 :(得分:3)

它是Highcharts中最受欢迎的功能。

http://highcharts.uservoice.com/forums/55896-general 看起来我们要等一段时间!

Does it support 3D pie chart?

使用 Google可视化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>

有关更多功能https://developers.google.com/chart/interactive/docs/gallery/piechart

,请参阅文档

希望我帮助过你:)

答案 2 :(得分:2)

Orson Charts for HTML5执行3D饼图(以及其他),但不是您在示例中显示的多个级别(级别表示什么?)。图表可以任意角度旋转(参见live demos),工具提示和鼠标事件支持正在进行中。

Sample pie chart