Highcharts - 气泡基础图表

下一步

下面是基础气泡图示例。

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

基础气泡图示例如下。

配置

现在，让我们了解已采取的额外配置/步骤。

图表

将图表类型配置为基于气泡。chart.type决定图表的序列类型。在此处，默认值是“line”（折线）。

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

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

示例

highcharts_bubble_basic.htm

演示

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/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',
               zoomType: 'xy'
            };
            var title = {
               text: 'Highcharts Bubbles'   
            };   
            var series = [
               {
                  data: [
                     [97, 36, 79], [94, 74, 60], [68, 76, 58], [64, 87, 56],
                     [68, 27, 73], [74, 99, 42], [7, 93, 87],  [51, 69, 40],
                     [38, 23, 33], [57, 86, 31]
                  ]
               }, 
               {
                  data: [
                     [25, 10, 87], [2, 75, 59],  [11, 54, 8],  [86, 55, 93],
                     [5, 3, 58],   [90, 63, 44], [91, 33, 17], [97, 3, 56],
                     [15, 67, 48], [54, 25, 81]
                  ]
               }, 
               {
                  data: [
                     [47, 47, 21], [20, 12, 4],  [6, 76, 91],  [38, 30, 60],
                     [57, 98, 64], [61, 17, 80], [83, 60, 13], [67, 78, 75],
                     [64, 12, 10], [30, 77, 82]
                  ]
               }
            ];
            
            var json = {};   
            json.chart = chart; 
            json.title = title;     
            json.series = series;   
            $('#container').highcharts(json);
         });
      </script>
   </body>
   
</html>

结果

确认结果。

highcharts_bubble_charts.htm

打印页面