<title>
Highcharts 教程 | 菜鸟教程
</title>
<script
src
=
"http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"
></script>
<script
src
=
"/try/demo_source/highcharts.js"
></script>
</head>
<div
id
=
"container"
style
=
"
width
:
550px
;
height
:
400px
;
margin
:
0
auto
"
></div>
<script
language
=
"JavaScript"
>
$
(
document
).
ready
(
function
()
{
</script>
</body>
</html>
实例中 id 为 container 的 div 用于包含 Highcharts 绘制的图表。
第二步: 创建配置文件
Highcharts 库使用 json 格式来配置。
$('#container').highcharts(json);
这里 json 表示使用 json 数据格式和 json 格式的配置来绘制图表。步骤如下:
为图表配置标题:
var title = {
text: '月平均气温'
为图表配置副标题:
var subtitle = {
text: 'Source: runoob.com'
配置要在 X 轴显示的项。
var xAxis = {
categories: ['一月', '二月', '三月', '四月', '五月', '六月'
,'七月', '八月', '九月', '十月', '十一月', '十二月']
配置要在 Y 轴显示的项。
var yAxis = {
title: {
text: 'Temperature (\xB0C)'
plotLines: [{
value: 0,
width: 1,
color: '#808080'
配置提示信息:
var tooltip = {
valueSuffix: '\xB0C'
配置图表向右对齐:
var legend = {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
配置图表要展示的数据。每个系列是个数组,每一项在图片中都会生成一条曲线。
var series = [
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
26.5, 23.3, 18.3, 13.9, 9.6]
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8,
24.1, 20.1, 14.1, 8.6, 2.5]
name: 'Berlin',
data: [-0.9, 0.6, 3.5