Highcharts 简明教程
Highcharts - Configuration Syntax
在本章中，我们将展示使用 Highcharts API 绘制图表所需的配置。
In this chapter, we will showcase the configuration required to draw a chart using the Highcharts API.
Step 1: Create HTML Page
使用 jQuery 和 Highcharts JavaScript 库创建 HTML 页面。
Create an HTML page with the jQuery and Highcharts javascript libraries.
HighchartsTestHarness.htm
HighchartsTestHarness.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>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
<script language = "JavaScript">
$(document).ready(function() {
});
</script>
</body>
</html>此处的 container div 用于包含使用 Highcharts 库绘制的图表。
Here the container div is used to contain the chart drawn using Highcharts library.
Step 2: Create Configurations
Highcharts 库使用 json 语法来提供非常简单的配置。
Highcharts library uses very simple configurations using json syntax.
$('#container').highcharts(json);这里 json 表示 Highcharts 库用于使用 highcharts() 方法在容器 div 中绘制图表的数据和配置 json。现在，我们将配置各种参数以创建所需的 json 字符串。
Here json represents the json data and configuration which the Highcharts library uses to draw a chart within the container div using the highcharts() method. Now, we will configure the various parameters to create the required json string.
title
配置图表的标题。
Configure the title of the chart.
var title = {
text: 'Monthly Average Temperature'
};subtitle
配置图表的副标题。
Configure the subtitle of the chart.
var subtitle = {
text: 'Source: WorldClimate.com'
};xAxis
配置要显示在 X 轴上的刻度标记。
Configure the ticker to be displayed on the X-Axis.
var xAxis = {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'
,'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
};yAxis
配置标题和要显示在 Y 轴上的绘制线。
Configure the title, plot lines to be displayed on the Y-Axis.
var yAxis = {
title: {
text: 'Temperature (\xB0C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
};tooltip
配置工具提示。在值后面添加要附加的后缀（y 轴）。
Configure the tooltip. Put suffix to be added after value (y-axis).
var tooltip = {
valueSuffix: '\xB0C'
}legend
配置要显示在图表右侧以及其他属性的图例。
Configure the legend to be displayed on the right side of the chart along with other properties.
var legend = {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
};series
配置要显示在图表上的数据。系列是数组，其中该数组中的每个元素表示图表上的一条线。
Configure the data to be displayed on the chart. Series is an array where each element of this array represents a single line on the chart.
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, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
},
{
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}
];Step 3: Build the json data
合并所有配置。
Combine all the configurations.
var json = {};
json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.legend = legend;
json.series = series;Step 4: Draw the chart
$('#container').highcharts(json);Example
考虑以下示例，以进一步了解配置语法 -
Consider the following example to further understand the Configuration Syntax −
highcharts_configuration.htm
highcharts_configuration.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>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
<script language = "JavaScript">
$(document).ready(function() {
var title = {
text: 'Monthly Average Temperature'
};
var subtitle = {
text: 'Source: WorldClimate.com'
};
var xAxis = {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
};
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, 8.4, 13.5, 17.0, 18.6,
17.9, 14.3, 9.0, 3.9, 1.0]
},
{
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0,
16.6, 14.2, 10.3, 6.6, 4.8]
}
];
var json = {};
json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.legend = legend;
json.series = series;
$('#container').highcharts(json);
});
</script>
</body>
</html>