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

列印頁面