Highcharts入門之簡介_關於JavaScript

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> Highcharts入門之簡介

Highcharts入門之簡介

編輯：關於JavaScript

在網頁中創建一個這樣的圖表，你覺得會要多久？

確實需要很久很久，如果你對JavaScript不是特別熟練的話。

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

當然他的功能遠不止這些，各種圖表，打印，導出，對比分析。

他不僅僅可以用來做網站的圖表分析，就是在有什麼總結演示的時候用這個做出來的東西想必也是讓人眼前一亮吧，完全就可以拋棄PPT了啊。

所以趕緊來了解如何使用他吧！！！

下面給一個簡單的Dome：

1.在highcharts中屬性以逗號隔開

2.一個大的屬性中使用{}，在{}中填寫具體的屬性

3.除了數據其他的屬性一般使用”"包含

<!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的地方創建圖表
      chart:{
        type:'line'   //圖表的類型，還有column等
      },
      title:{
        text:'Dome01'  //圖表的標題
      },
      xAxis:{
        categories:['A','B','C','D']  //x坐標的分組
      },
      yAxis:{
        title:{
          text:'some'   //y坐標的標題
        }
      },
      series:[{
        name:'zhangsan',  //數據的名稱
        data:[2,3,5,3]   //具體的數據
      },{
        name:'lisi',
        data:[3,5,1,3]
      },{
        name:'wangwu',
        data:[1,4,6,2]
      }]
    }) ;
  });
</script>
</body>
</html>

如果現在看不懂也沒關系，可以放在浏覽器裡試一試，後續我還會更新Highcharts的相關文章，感興趣的朋友們可以繼續支持百度。

上一頁:jQuery 獲取頁面li數組並刪除不在數組中的key
下一頁:Highcharts入門之基本屬性

關於JavaScript

Javascript面向對象教程:Object與Function: JavaScript的面向對象是基於原形的，所有對象都有一條屬於自己的原型鏈。Object與Func
JS控制靜態頁面傳遞參數並獲取參數應用: 在項目中遇到這也一個問題：有a.html和b.html。1.a頁面已經打開，b頁面尚未打開，我希望在
Egret引擎開發指南之創建項目: Egret提供非常方便的創建工具，我們把創建後的文件總和稱之為項目。在後面的操作中，我們對創建的項目

DIV CSS 佈局教程網

相關文章