快捷導(dǎo)航

Highcharts入門(mén)之簡(jiǎn)介

更新時(shí)間：2016年08月02日 16:54:54 投稿：daisy

Highcharts 是一個(gè)用純JavaScript編寫(xiě)的一個(gè)圖表庫(kù), 能夠很簡(jiǎn)單便捷的在web網(wǎng)站或是web應(yīng)用程序添加有交互性的圖表，并且免費(fèi)提供給個(gè)人學(xué)習(xí)、個(gè)人網(wǎng)站和非商業(yè)用途使用。下面通過(guò)本文的介紹及實(shí)例一起來(lái)學(xué)習(xí)學(xué)習(xí)吧。

在網(wǎng)頁(yè)中創(chuàng)建一個(gè)這樣的圖表，你覺(jué)得會(huì)要多久？

確實(shí)需要很久很久，如果你對(duì)JavaScript不是特別熟練的話。

但是有個(gè)好消息就是如果，你使用Highcharts框架的話，可能十多行代碼就能讓你在頁(yè)面中生成這樣有特效的圖表。

當(dāng)然他的功能遠(yuǎn)不止這些，各種圖表，打印，導(dǎo)出，對(duì)比分析。

他不僅僅可以用來(lái)做網(wǎng)站的圖表分析，就是在有什么總結(jié)演示的時(shí)候用這個(gè)做出來(lái)的東西想必也是讓人眼前一亮吧，完全就可以拋棄PPT了啊。

所以趕緊來(lái)了解如何使用他吧?。?！

下面給一個(gè)簡(jiǎn)單的Dome：

1.在highcharts中屬性以逗號(hào)隔開(kāi)

2.一個(gè)大的屬性中使用{}，在{}中填寫(xiě)具體的屬性

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'   //圖表的類(lèi)型，還有column等
      },
      title:{
        text:'Dome01'  //圖表的標(biāo)題
      },
      xAxis:{
        categories:['A','B','C','D']  //x坐標(biāo)的分組
      },
      yAxis:{
        title:{
          text:'some'   //y坐標(biāo)的標(biāo)題
        }
      },
      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)在看不懂也沒(méi)關(guān)系，可以放在瀏覽器里試一試，后續(xù)我還會(huì)更新Highcharts的相關(guān)文章，感興趣的朋友們可以繼續(xù)支持腳本之家。

您可能感興趣的文章: