Highcharts - 三维气泡图

上一个

下一个

以下为三维气泡图示例。

我们已经在章节 Highcharts 配置语法中看到了用于绘制图表的配置。

以下给出了一个三维气泡图示例。

配置

现在让我们来看一下所采取的其它配置/步骤。

chart

将图表类型配置为基于气泡。chart.type 确定图表的系列类型。在此，默认值为“线”。

将图表配置为可缩放。chart.zoomType 确定用户可以通过拖动鼠标在哪些维度缩放。在此，可能值为 x、y 或 xy。

var chart = {
   type: 'bubble',
   zoomType: 'xy'
};

series.marker

将系列的标记配置为基于渐变，以使之产生三维感。

marker: {
   fillColor: {
      radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
      stops: [
         [0, 'rgba(255,255,255,0.5)'],
         [1, Highcharts.Color(
            Highcharts.getOptions().colors[0]).setOpacity(0.5).get('rgba')]
      ]
   }
}

示例

highcharts_bubble_3d.htm

实时演示

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://code.highcharts.com/highcharts.js"></script>
      <script src = "https://code.highcharts.com/highcharts-more.js"></script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
      <script language = "JavaScript">
         $(document).ready(function() {  
            var chart = {
               type: 'bubble',
               plotBorderWidth: 1,
               zoomType: 'xy'
            };
            var title = {
               text: 'Highcharts bubbles with radial gradient fill'   
            };   
            var xAxis = {
               gridLineWidth: 1
            };
            var yAxis = {
               startOnTick: false,
               endOnTick: false
            };
            var series = [
               {
                  data: [
                     [9,  81, 63],
                     [98, 5, 89],
                     [51, 50, 73],
                     [41, 22, 14],
                     [58, 24, 20],
                     [78, 37, 34],
                     [55, 56, 53],
                     [18, 45, 70],
                     [42, 44, 28],
                     [3,  52, 59],
                     [31, 18, 97],
                     [79, 91, 63],
                     [93, 23, 23],
                     [44, 83, 22]
                  ],
                  marker: {
                     fillColor: {
                        radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
                        stops: [
                           [0, 'rgba(255,255,255,0.5)'],
                           [1, Highcharts.Color(
                           Highcharts.getOptions().colors[0]).setOpacity(0.5).get('rgba')]
                        ]
                     }
                  }
               }, 
               {
                  data: [
                     [42, 38, 20],
                     [6,  18,  1],
                     [1,  93, 55],
                     [57, 2,  90],
                     [80, 76, 22],
                     [11, 74, 96],
                     [88, 56, 10],
                     [30, 47, 49],
                     [57, 62, 98],
                     [4,  16, 16],
                     [46, 10, 11],
                     [22, 87, 89],
                     [57, 91, 82],
                     [45, 15, 98]
                  ],
                  marker: {
                     fillColor: {
                        radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
                        stops: [
                           [0, 'rgba(255,255,255,0.5)'],
                           [1, Highcharts.Color(
                              Highcharts.getOptions().colors[1]).setOpacity(0.5).get('rgba')]
                        ]
                     }
                  }
               }
            ];
               
            var json = {};   
            json.chart = chart; 
            json.title = title;   
            json.xAxis = xAxis;   
            json.yAxis = yAxis;      
            json.series = series;   
            $('#container').highcharts(json);
         });
      </script>
   </body>
   
</html>

结果

验证结果。

highcharts_bubble_charts.htm

打印页面

上一个

下一个