Hello World程序 · Highcharts 中文教程

# Hello World程序 > 本人精通c、c++、java、C#、Ruby、Perl、Lisp、Python、Objective-C、ActionScript、Pascal、JavaScript、PHP、ASP等語言的HelloWorld程序編寫新建一個html文件，將highcharts引入到你的頁面后，通過兩個步驟我們就可以創建一個簡單的圖表了。 ##### 1、創建div容器在頁面的?body部分創建一個div，并指定div 的?id，高度和寬度，代碼如下 ``` <div?id="container"?style="min-width:800px;height:400px"></div> ``` ##### 2、編寫Highcharts代碼編寫Highcharts必須的代碼，用<script></script>包裹，代碼可以放在頁面的任意地方，一個最簡單的圖表實例代碼如下 ``` $(function?()?{? ????$('#container').highcharts({???????????????????//圖表展示容器，與div的id保持一致 ????????chart:?{ ????????????type:?'column'?????????????????????????//指定圖表的類型，默認是折線圖（line） ????????}, ????????title:?{ ????????????text:?'My?first?Highcharts?chart'??????//指定圖表標題 ????????}, ????????xAxis:?{ ????????????categories:?['my',?'first',?'chart']???//指定x軸分組 ????????}, ????????yAxis:?{ ????????????title:?{ ????????????????text:?'something'??????????????????//指定y軸的標題 ????????????} ????????}, ????????series:?[{?????????????????????????????????//指定數據列 ????????????name:?'Jane',??????????????????????????//數據列名 ????????????data:?[1,?0,?4]????????????????????????//數據 ????????},?{ ????????????name:?'John', ????????????data:?[5,?7,?3] ????????}] ????}); }); ``` 完成上述兩個步驟后，保存文件并用瀏覽器打開，運行結果如下圖所示 ![Helloworld程序](https://box.kancloud.cn/2016-05-04_572991759479c.jpg) **圖1-5 My first chart** [在線試一試](http://code.hcharts.cn/hcharts.cn/hhhhWr) ##### 上述例子完整html代碼如下????<small>你可以拷貝保存為html文件運行即可看到效果</small> ``` <html> <head> ???<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> ???<script> ?$(function?()?{? ????$('#container').highcharts({ ????????chart:?{ ????????????type:?'column' ????????}, ????????title:?{ ????????????text:?'My?first?Highcharts?chart' ????????}, ????????xAxis:?{ ????????????categories:?['my',?'first',?'chart'] ????????}, ????????yAxis:?{ ????????????title:?{ ????????????????text:?'something' ????????????} ????????}, ????????series:?[{ ????????????name:?'Jane', ????????????data:?[1,?0,?4] ????????},?{ ????????????name:?'John', ????????????data:?[5,?7,?3] ????????}] ????}); }); ???</script> </head> <body> ???<div?id="container"?style="min-width:800px;height:400px;"></div> </body> </html> ``` 至此，我們已經初步了解和學會了自己編寫簡單的Highcharts圖表了，這只是開始，后面的會越來越有趣。 ### 如何學習Highcharts Highcharts的配置（或者說Highcharts代碼）是一個`json`字符串，類似于`{chart:{type:"spline"}}`，json具有易于人閱讀和編寫的特點，所以學習和開發Highcharts并不難，只是熟悉API程度的問題。所以本教程的重點是帶大家熟悉API文檔加一點點處理技巧，更多的是靠大家花時間學習和實踐。 #### 準備知識 * 熟悉Html、jQuery、Json、Ajax等前端知識 * 至少會一種后臺語言，例如Php、Java、asp等（Highcharts只是做數據展現，具體的數據來源必須通過動態語言） #### 幾點建議 * 任何東西的掌握必須通過自我實踐 * 多看API，Highcharts提供的API文檔非常完善，幾乎所有的問題都可以在API找到解決辦法 * * * （正文完，最后更新時間：2015-05-22 12:49:19）