網頁圖表Highcharts實踐教程之圖表代碼構成

時間 2019-11-06

標籤網頁圖表 highcharts 實踐教程代碼構成欄目 HTML 简体版

原文原文鏈接

網頁圖表Highcharts實踐教程之圖表代碼構成

Highcharts第一個實例

下面咱們來實現本書的第一個Highcharts實例。javascript

【實例1-1】下面來製做北京連續一週最高溫度折線圖。操做過程以下：php

（1）新建一個網頁文件，命名爲Hello.html。同時，將title設置爲Hello Highcharts。代碼以下：css

<html xmlns="http://www.w3.org/1999/xhtml">html
<head>java
<meta charset="utf-8" />jquery
<title>Hello Highcharts</title>瀏覽器
</head>網站
<body>spa
</body>插件
</html>

（2）在網頁中添加一個div，設置id爲container。

<div id="container"></div>

（3）設置該div的樣式，代碼以下：

<style type="text/css">
#container {
width:500px;
height:300px;
border:1px solid #000;
padding :20px;
margin:10px;
}
</style>

（4）引入jQuery腳本和Highcharts腳本，代碼以下：

<script src="jquery.js"></script>
<script src="highcharts.js"></script>

注意：這裏須要將這兩個腳本文件放到Hello.html所在的目錄。

（5）添加圖表繪製代碼。代碼以下：

<script type="text/javascript">
$(document).ready(function () {
var options = {
chart: {
type: 'line'
},
title: {
text: '北京一週最高溫度'
},
subtitle: {
text: '2015.02.08--2015.02.14'
},
series: [{
name: '最高溫度',
data: [7, 11, 8, 7, 9, 9, 9]
}]
};
$('#container').highcharts(options);
});
</script>

保存以上文件，運行結果如圖1.18所示。

圖1.18 第一個實例

Highcharts圖表構成

爲了方便你們更好了解Highcharts圖表，這裏從界面和代碼兩個角度講解Highcharts圖表的實現方式。

Highcharts界面構成

在第一個實例中，咱們實現了一個圖表。做爲一個圖表，一般是由圖表區、標題、繪圖區、座標軸、圖例/數據列等幾個部分構成，如圖1.19所示。在Highcharts中，每一個部分都由一個或者多個組件構成。其中，黑色方框括住的部分就是圖表區。而由座標軸圍起來的部分就是繪圖區。後面將依次講解這幾個部分的實現方式。這裏，你們只要知道每一個部分的名稱便可。

圖1.19 圖表構成

Highcharts代碼構成

雖然咱們在第一個實例中並無編寫多少代碼，但圖1.19卻展示豐富的內容。這充分的體現了Highcharts使用的便捷性。實現Highcharts圖表實際分爲兩個步驟，依次講解。

1.圖表配置項對象

Highcharts核心主體就是圖表配置項對象。該對象包含了圖表的各種數據和配置信息。每一個部分每每都是由更小的配置項對象組成。用戶只要按照規範的格式，填寫對應的數據和配置值，就能夠。整個過程就像搭建積木同樣。下面對第一個實例的配置項對象作簡要介紹。

var options = {
chart: { //圖表基本信息
type: 'line' //指定圖表類型
},
title: { //設置圖表標題
text: '北京一週最高溫度' //指定標題內容
},
subtitle: { //設置圖表副標題
text: '2015.02.08--2015.02.14' //設置副標題內容
},
series: [{ //定義數據列
name: '最高溫度', //指定數據列的標題
data: [7, 11, 8, 7, 9, 9, 9] //指定數據節點
}]
};

這塊內容也可使用傳統Javascript逐項賦值的方式實現。從維護角度考慮，推薦使用以上方式實現。

2.在容器中繪製圖表

在指定好配置項對象後，用戶就可使用Highcharts插件提供的higcharts方法在指定的容器中繪製圖表。須要的代碼只須要如下一行。

$('#container').highcharts(options);

只須要以上兩個步驟，就能夠在現有的網頁中繪製出圖1.19所示的圖表了。用戶對圖表進行擴展，只須要修改圖表配置對象便可。

Highcharts商業受權和定製開發

在實際Highcharts開發過程當中，開發者每每會面對受權問題和複雜需求問題。這裏針對這兩個方面最簡要講解，以幫助開發者更好的使用Highcharts。

Highcharts商業受權

Highcharts是一個很是好的圖表插件。在使用的時候，它針對我的和非商業應用是所有免費的。對於商業開發，開發者須要購買相應的商業受權。在國內，開發者能夠經過Highcharts官方受權的Higcharts中文網（hcharts.cn）購買商業受權。

該網站是國內最權威的Highcharts技術網站。它提供Highcharts各項服務，如商業受權、定製、諮詢等服務。在瀏覽器中輸入網址http://www.hcharts.cn/service/license.php，就能夠進入該網站的商業受權網頁，如圖1.20所示。

圖1.20 商業受權頁面

按照網頁提示，就能夠申請購買商業受權。

Highcharts定製開發

在Highcharts中，各種圖表的實現採用模版化機制。用戶只須要極少的設置，就能夠配置精美的圖表。但實際開發中，開發者常常面臨各類更爲複雜的客戶需求。這個時候，使用Highcharts提供各類配置項每每很難實現。遇到此類問題，用戶能夠經過購買定製服務，來解決使用中遇到的難題。

Highcharts中文網提供一流的技術諮詢和定製服務，用戶只須要進入官網的圖表定製服務頁面（如圖1.21），就能夠申請響應的服務。

圖1.21 定製服務

本文選自：網頁圖表Highcharts實踐教程基礎篇大學霸內部資料，轉載請註明出處，尊重技術尊重IT人！

相關文章

相關標籤/搜索

紅包項目實戰

網站品質教程

網站主機教程

代碼格式化

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<