博客開了兩個月了，今天終於有勇氣寫出第一篇了，希望對大家能有所幫助。
介紹一下HightCharts：
Highcharts是一款純javascript編寫的圖表庫，能夠很簡單便捷的在Web網站或Web應用中添加交互性的圖表。
Highcharts目前支持直線圖、曲線圖、面積圖、柱狀圖、餅圖、散點圖等多達18種不同類型的圖表。
HightCharts有一個中文網：http://www.hcharts.cn/，里面有各種圖的模板和源代碼，可以很好地學習
首先說一下柱狀圖：
在敲代碼之前，要引入兩個js文件
引過來之后就是這樣
注意：一定要是jquery-1.8.2.min.js放上面，hightcharts.js放下面
<script type="text/javascript" src="jquery/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="jquery/highcharts.js"></script> <script type="text/javascript"> $(function(){ $("#container").highcharts({ //圖表展示容器，與div的id保持一致 chart: { type:'column', //指定圖表的類型，默認是折線圖（line） }, title: { text:'這是我的圖表', //指定圖表標題 }, xAxis: { categories: ['柱', '狀', '圖'], //指定X分組 }, yAxis: { title: { text:'something', //指定Y軸的標題 }, }, series: [ //指定數據列，數據列里的數據是可以隨業務的需求改變的 { name:'Jane', //數據列名 data:[1,2,4], //數據 },{ name:'John', data:[5,3,7], } ], }); }); </script> <body> <div id="container" style="width: 800px; height: 500px;"></div> //id="container",上面那個id選擇器里寫的就是這個id </body>
運行效果圖：
折線圖：
<script type="text/javascript" src="jquery/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="jquery/highcharts.js"></script> <script type="text/javascript"> $(function(){ $("#container").highcharts({ //圖表展示容器，與div的id保持一致 //默認是折線圖，所以chart: {type:'line',},不用寫 title: { //頭部 text: '我是標題', //text：標題的文本 x: -20 }, subtitle: { //副標題，寫不寫都行 text: '我是副標題', x: -20 }, xAxis: { //X坐標軸 categories類別 categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'], plotLines: [{ //plotLines：標示線 value: 2, //定義在哪個值上顯示標示線，這里是在x軸上刻度為3的值處垂直化一條線 width: 2, //標示線的寬度，2px dashStyle:'solid', //默認值是solid實線，這里定義為虛線 color: 'red',//線的顏色，定義為紅色 }] }, yAxis: { //Y坐標軸 title: { text: 'Temperature (°C)' }, plotLines: [{ //plotLines：標示線 value: 2, //定義在哪個值上顯示標示線，這里是在x軸上刻度為3的值處垂直化一條線 width: 1, //標示線的寬度，2px dashStyle:'solid', //默認值，這里定義為實線 color: '#808080',//線的顏色，定義為灰色 }] }, tooltip: { //數據提示框 valueSuffix: '$', //highcharts 提供了 valuePrefix(前綴)、valueSuffix（后綴） 來給數據添加前綴及后綴 }, //比如說 valuePrefix: '￥', valueSuffix: '元' legend: { //圖例 layout: 'vertical', //圖例內容布局方式，有水平布局及垂直布局可選，對應的配置值是： “horizontal(水平)”， “vertical(垂直)” align: 'left', //圖例在圖表中的對齊方式，有 “left”, "center", "right" 可選 verticalAlign: 'middle', //垂直對齊方式，有 'top'， 'middle' 及 'bottom' 可選 borderWidth: 2 //邊框寬度 }, series:[ //數據列 { //數據列中的 name 代表數據列的名字，並且會顯示在數據提示框（Tooltip）及圖例（Legend）中 name: 'John', data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] },{ name: 'New York', data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5] },{ name: 'Berlin', data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0] },{ name: 'London', data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] }] }); }); </script> <body> <div id="container" style="width: 800px; height: 500px;"></div> </body>
運行效果圖：
餅圖：
<script type="text/javascript" src="jquery/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="jquery/highcharts.js"></script> <script type="text/javascript"> $(function () { $("#container").highcharts({ //圖表展示容器，與div的id保持一致 chart: { //指定圖表的類型，默認是折線圖（line） plotBackgroundColor: null, //繪圖區背景顏色 plotBorderWidth: null, //繪圖區邊框寬度 plotShadow: false //繪圖投影 }, title: { //頭部 text: 'Browser market shares at a specific website, 2010' }, tooltip: { //數據提示框 //單個點的格式化函數 pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }, plotOptions: { //圖例事件，圖例默認的點擊行為是顯示或隱藏當前數據列 pie: { allowPointSelect: false, //cursor: 'pointer', dataLabels: { //數據標簽 enabled: true, //通過設置 legend.enabled = true | false 來打開或關閉圖例 color: 'red', connectorColor: 'blue', //連接線顏色 format: '<b>{point.name}</b>: {point.percentage:.1f} %' } } }, series: [ { type: 'pie', //pie：餅圖 name: 'Browser share', data: [ ['Firefox', 45.0], ['IE', 26.8], { name: 'Chrome', y: 12.8, sliced: false, //餅圖各個部分分不分開，true為分開，false為不分開 selected: true }, ['Safari', 8.5], ['Opera', 6.2], ['Others', 0.7] ] }] }); }); </script> <body> <div id="container" style="width: 800px; height: 500px;"></div> </body>
運行效果圖：
好了，HightCharts基本圖形就到這里，下一篇介紹HightCharts與后台交互