在網(wǎng)頁中創(chuàng)建一個這樣的圖表，你覺得會要多久？
labels.png
確實需要很久很久，如果你對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>
</head>
<body>
<div class="chart" style="width: 800px ;height: 400px”> //創(chuàng)建一個div用來展示圖表
</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ù)我會一一講解這些屬性和用法。
