Highcharts入門之簡介
更新時間：2016年08月02日 16:54:54 投稿：daisy
Highcharts 是一個用純JavaScript編寫的一個圖表庫, 能夠很簡單便捷的在web網(wǎng)站或是web應(yīng)用程序添加有交互性的圖表，并且免費提供給個人學(xué)習(xí)、個人網(wǎng)站和非商業(yè)用途使用。下面通過本文的介紹及實例一起來學(xué)習(xí)學(xué)習(xí)吧。
在網(wǎng)頁中創(chuàng)建一個這樣的圖表，你覺得會要多久？
確實需要很久很久，如果你對JavaScript不是特別熟練的話。
但是有個好消息就是如果，你使用Highcharts框架的話，可能十多行代碼就能讓你在頁面中生成這樣有特效的圖表。
當(dāng)然他的功能遠不止這些，各種圖表，打印，導(dǎo)出，對比分析。
他不僅僅可以用來做網(wǎng)站的圖表分析，就是在有什么總結(jié)演示的時候用這個做出來的東西想必也是讓人眼前一亮吧，完全就可以拋棄PPT了啊。
所以趕緊來了解如何使用他吧?。?！
下面給一個簡單的Dome：
1.在highcharts中屬性以逗號隔開
2.一個大的屬性中使用{}，在{}中填寫具體的屬性
3.除了數(shù)據(jù)其他的屬性一般使用”"包含
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<div class="chart" style="width: 800px ;height: 400px">
</div>
<script>
$(function () {
$(".chart").highcharts({ //指定在class為chart的地方創(chuàng)建圖表
chart:{
type:'line' //圖表的類型，還有column等
},
title:{
text:'Dome01' //圖表的標題
},
xAxis:{
categories:['A','B','C','D'] //x坐標的分組
},
yAxis:{
title:{
text:'some' //y坐標的標題
}
},
series:[{
name:'zhangsan', //數(shù)據(jù)的名稱
data:[2,3,5,3] //具體的數(shù)據(jù)
},{
name:'lisi',
data:[3,5,1,3]
},{
name:'wangwu',
data:[1,4,6,2]
}]
}) ;
});
</script>
</body>
</html>
如果現(xiàn)在看不懂也沒關(guān)系，可以放在瀏覽器里試一試，后續(xù)我還會更新Highcharts的相關(guān)文章，感興趣的朋友們可以繼續(xù)支持腳本之家。
相關(guān)文章
本文為大家分享了5個不錯的javascript文件上傳插件，選擇一款功能強大使用簡單的上傳插件將為我們節(jié)省很多開發(fā)時間2018-09-09
最近因為心血來潮想要試試thinkJS操作mongoDB，去官方文檔看了看，默認是只給了mysql的配置，源代碼也是沒有配置mongo的，只有一個官方案例，無奈只能自己學(xué)習(xí)了，下面是自己的一些學(xué)習(xí)總結(jié)，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-12-12
組件庫Monmrepo架構(gòu)與開發(fā)調(diào)試環(huán)境構(gòu)建詳解
這篇文章主要為大家介紹了組件庫Monmrepo架構(gòu)與開發(fā)調(diào)試環(huán)境構(gòu)建詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
Highcharts 是一個用純JavaScript編寫的一個圖表庫, 能夠很簡單便捷的在web網(wǎng)站或是web應(yīng)用程序添加有交互性的圖表，并且免費提供給個人學(xué)習(xí)、個人網(wǎng)站和非商業(yè)用途使用。下面通過本文的介紹及實例一起來學(xué)習(xí)學(xué)習(xí)吧。2016-08-08
精通JavaScript 糾正 cleanWhitespace函數(shù)
這個函數(shù)用在火狐(firefox)上面老是出錯，今天仔細研究了下，改正了，希望別人不要遇到我這樣的問題2010-03-03
本文用實例演示如何用d3.js實現(xiàn)實時刷新的折線圖,非常具有實用價值,需要的朋友可以參考下。2016-08-08
Highcharts是一個用純JavaScript編寫的一個圖表庫，之前小編發(fā)了一篇介紹Highcharts的文章，那么本文將進一步的介紹Highcharts的基本屬性，有需要的可以參考學(xué)習(xí)。2016-08-08
FullCalendar是一款基于jQuery的日歷插件，適用于各種日程安排、工作計劃等場景，本文是fullCalendar官方文檔的中文版，主要介紹了fullCalendar的具體屬性與方法，大家可以參考一下2017-02-02
JS日程管理插件FullCalendar提供了豐富的屬性設(shè)置和方法調(diào)用，開發(fā)者可以根據(jù)FullCalendar提供的API快速完成一個日歷日程的開發(fā)，本文將FullCalendar的常用屬性和方法、回調(diào)函數(shù)等整理成中文文檔，以供參閱。2017-02-02
Highcharts學(xué)習(xí)之?dāng)?shù)據(jù)列
數(shù)據(jù)列配置是 Highcharts 最復(fù)雜也是最靈活的配置，如果說 Highcharts 是靈活多變，細節(jié)可定制的話，那么數(shù)據(jù)列配置就是這個重要特性的核心。2016-08-08