[JS圖表控制元件]Highcharts:非常漂亮的圖表API
阿新 • • 發佈:2019-02-16
Highcharts是一個製作圖表的純Javascript類庫,主要特性如下:
- 相容性:相容當今所有的瀏覽器,包括iPhone、IE和火狐等等;
- 對個人使用者完全免費;
- 純JS,無BS;
- 支援大部分的圖表型別:直線圖,曲線圖、區域圖、區域曲線圖、柱狀圖、餅裝圖、散佈圖;
- 跨語言:不管是PHP、Asp.net還是Java都可以使用,它只需要三個檔案:一個是Highcharts的核心檔案highcharts.js,還有a canvas emulator for IE和Jquery類庫或者MooTools類庫;
- 提示功能:滑鼠移動到圖表的某一點上有提示資訊;
- 放大功能:選中圖表部分放大,近距離觀察圖表;
- 易用性:無需要特殊的開發技能,只需要設定一下選項就可以製作適合自己的圖表;
- 時間軸:可以精確到毫秒;
- ……
程式碼示例:
- var chart1 = new Highcharts.Chart({
- chart: {
- renderTo: 'chart-container-1',
- defaultSeriesType: 'bar'
- },
- title: {
- text: 'Fruit Consumption'
- },
-
xAxis: {
- categories: ['Apples', 'Bananas', 'Oranges]
- },
- yAxis: {
- title: {
- text: 'Fruit eaten'
- }
- },
- series: [{
- name: 'Jane',
- data: [1, 0, 4]
- }, {
-
name: '
- data: [5, 7, 3]
- }]
- });