Highcharts - Cú pháp cấu hình
Trong chương này, chúng tôi sẽ giới thiệu cấu hình cần thiết để vẽ biểu đồ bằng cách sử dụng API Highcharts.
Bước 1: Tạo trang HTML
Tạo một trang HTML với thư viện javascript jQuery và Highcharts.
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>Đây container div được sử dụng để chứa biểu đồ được vẽ bằng thư viện Highcharts.
Bước 2: Tạo cấu hình
Thư viện Highcharts sử dụng các cấu hình rất đơn giản bằng cú pháp json.
$('#container').highcharts(json);Ở đây json đại diện cho dữ liệu và cấu hình json mà thư viện Highcharts sử dụng để vẽ biểu đồ bên trong container div bằng phương thức highcharts (). Bây giờ, chúng ta sẽ cấu hình các tham số khác nhau để tạo chuỗi json cần thiết.
tiêu đề
Định cấu hình tiêu đề của biểu đồ.
var title = {
text: 'Monthly Average Temperature'
};phụ đề
Định cấu hình phụ đề của biểu đồ.
var subtitle = {
text: 'Source: WorldClimate.com'
};xAxis
Định cấu hình mã được hiển thị trên Trục X.
var xAxis = {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'
,'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
};yAxis
Định cấu hình tiêu đề, các dòng cốt truyện sẽ hiển thị trên trục Y.
var yAxis = {
title: {
text: 'Temperature (\xB0C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
};chú giải công cụ
Định cấu hình chú giải công cụ. Đặt hậu tố được thêm vào sau giá trị (trục y).
var tooltip = {
valueSuffix: '\xB0C'
}huyền thoại
Định cấu hình chú giải được hiển thị ở bên phải của biểu đồ cùng với các thuộc tính khác.
var legend = {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
};loạt
Định cấu hình dữ liệu được hiển thị trên biểu đồ. Chuỗi là một mảng trong đó mỗi phần tử của mảng này đại diện cho một dòng duy nhất trên biểu đồ.
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]
}
];Bước 3: Xây dựng dữ liệu json
Kết hợp tất cả các cấu hình.
var json = {};
json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.legend = legend;
json.series = series;Bước 4: Vẽ biểu đồ
$('#container').highcharts(json);Thí dụ
Hãy xem xét ví dụ sau để hiểu thêm về Cú pháp cấu hình:
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>Kết quả
Xác minh kết quả.