Highcharts 气泡图 - 学习 Hightcharts - 简单教程，简单编程

下图是一个 Highcharts 气泡图

配置

chart 配置

配置属性 chart 的 type 为 'bubble'

配置属性 chart.type 描述了图表类型，默认值为 "line"

配置属性 chart.zoomType 属性可配置图表放大

通过拖动鼠标进行缩放，沿 x 轴或 y 轴进行缩放，可以设置为：'x', 'y', 'xy'

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

范例

下面的代码列出了 Highcharts 气泡图 的基本配置

<!doctype html>
<meta charset="utf-8" />
<title>Highcharts 基础教程 | 简单教程(www.twle.cn)</title>
<script src="https://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://cdn.hcharts.cn/highcharts/highcharts-more.js"></script>
<div id="container" style="width: 500px; height: 400px; margin: 0 auto"></div>
<script>

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 options = {};

options.chart = chart;
options.title = title;
options.series = series;

var chart = Highcharts.chart('container',options);
</script>

运行范例 »

以上范例输出如下