Highcharts 配置语法；Highcharts 配置选项详细说明
Highcharts 配置語法
本章節(jié)我們將為大家介紹使用 Highcharts 生成圖表的一些配置。
第一步：創(chuàng)建 HTML 頁面
創(chuàng)建一個 HTML 頁面，引入 jQuery 和 Highcharts 庫：
文件名：HighchartsTest.htm
<html> <head> <title>Highcharts 教程 | 菜鳥教程</title> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="/try/demo_source/highcharts.js"></script> </head> <body> <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div> <script language="JavaScript"> $(document).ready(function() { }); </script> </body> </html>實例中 id 為 container 的 div 用于包含 Highcharts 繪制的圖表。
第二步: 創(chuàng)建配置文件
Highcharts 庫使用 json 格式來配置。
$('#container').highcharts(json);這里 json 表示使用 json 數(shù)據(jù)格式和 json 格式的配置來繪制圖表。步驟如下：
標題
為圖表配置標題：
var title = { text: '月平均氣溫' };副標題
為圖表配置副標題：
var subtitle = { text: 'Source: runoob.com' };X 軸
配置要在 X 軸顯示的項。
var xAxis = { categories: ['一月', '二月', '三月', '四月', '五月', '六月' ,'七月', '八月', '九月', '十月', '十一月', '十二月'] };Y 軸
配置要在 Y 軸顯示的項。
var yAxis = { title: { text: 'Temperature (\xB0C)' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] };提示信息
配置提示信息：
var tooltip = { valueSuffix: '\xB0C' }展示方式
配置圖表向右對齊：
var legend = { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 };數(shù)據(jù)
配置圖表要展示的數(shù)據(jù)。每個系列是個數(shù)組，每一項在圖片中都會生成一條曲線。
var series = [ { name: 'Tokyo', 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] } ];第三步: 創(chuàng)建 json 數(shù)據(jù)
組合是由配置信息:
var json = {}; json.title = title; json.subtitle = subtitle; json.xAxis = xAxis; json.yAxis = yAxis; json.tooltip = tooltip; json.legend = legend; json.series = series; Step 4: Draw the chart $('#container').highcharts(json);實例
以下為完整的實例(HighchartsTest.htm)：
<html> <head> <meta charset="UTF-8" /> <title>Highcharts </title> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> </head> <body> <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div> <script language="JavaScript"> $(document).ready(function() {var title = {text: '月平均氣溫' };var subtitle = {text: 'Source: runoob.com'};var xAxis = {categories: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月']};var yAxis = {title: {text: 'Temperature (\xB0C)'},plotLines: [{value: 0,width: 1,color: '#808080'}]}; var tooltip = {valueSuffix: '\xB0C'}var legend = {layout: 'vertical',align: 'right',verticalAlign: 'middle',borderWidth: 0};var series = [{name: 'Tokyo',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]}];var json = {};json.title = title;json.subtitle = subtitle;json.xAxis = xAxis;json.yAxis = yAxis;json.tooltip = tooltip;json.legend = legend;json.series = series;$('#container').highcharts(json); }); </script> </body> </html> 實列?
Highcharts 配置選項詳細說明
Highcharts 提供大量的配置選項參數(shù)，您可以輕松定制符合用戶要求的圖表，本章節(jié)為大家詳細介紹Highcharts 配置選項使用說明：
參數(shù)配置(屬性+事件)
chart.events.addSeries：添加數(shù)列到圖表中。
chart.events.click：整個圖表的繪圖區(qū)上所發(fā)生的點擊事件。
chart.events.load：圖表加載事件。
chart.events.redraw：圖表重畫事件，當點擊圖注顯示和隱藏繪圖時可以觸發(fā)。
chart.events.selection：當圖表曲線可選擇放大時，當選擇圖表操作時，可以觸發(fā)該事件。
chart.height：所繪制圖表的高度值。
chart.inverted：圖表中的x，y軸對換。
chart.polar：是否為極性圖表。
chart.reflow：當窗口大小改變時，圖表寬度自適應窗口大小改變。
chart.renderTo：圖表加載的位置，是頁面上的一個DOM對象。
chart.showAxes：在空白圖表中，是否顯示坐標軸。
chart.type：圖表的類型，默認為line，還有bar/column/pie……
chart.width：圖表繪圖區(qū)的寬度，默認為自適應。
chart.zoomType：圖表中數(shù)據(jù)報表的放大類型，可以以X軸放大，或是以Y軸放大，還可以以XY軸同時放大。
colors：圖表中多數(shù)列時，各數(shù)列之間的顏色。是一個數(shù)組，一般不動。
credits.enabled：是否允許顯示版權(quán)信息。
credits.href：版權(quán)所有的鏈接。
credits.text：版權(quán)信息顯示文字。
exporting.buttons.exportButton.enabled：是否允許顯示導出按鈕。
exporting.buttons.exportButton.menuItems：導出按鈕的菜單選項。
exporting.buttons.exportButton.onclick：導出按鈕被點擊的事件，不是內(nèi)部的菜單。
exporting.buttons.printButton.enabled：是否允許打印按鈕。
exporting.buttons.printButton.onclick：打印按鈕的點擊事件。
exporting.enabled：打印和導出按鈕是否被允許。
exporting.filename：被導出文件的文件名。
exporting.type：默認導出圖片的文件格式。
exporting.url：SVG圖表轉(zhuǎn)換并導出的接口處理地址。
exporing.width：默認導出圖片的寬度。
labels：標簽，可以加載到圖表的任何位置，里面有items，style。
lang：語言參數(shù)配置，與導出按鈕菜單有關(guān)的配置，時間名稱的配置等。
legend.enabled：是否允許圖注。
navigation.buttonOptions.enabled：圖表中所有導航中的按鈕是否可被點擊。
plotOptions.area.allowPointSelect：是否允許數(shù)據(jù)點的點擊。
plotOptions.area.color：繪圖的顏色。
plotOptions.area.dataLabels.enabled：是否允許數(shù)據(jù)標簽。
plotOptions.area.enableMouseTracking：是否允許數(shù)據(jù)圖表中，數(shù)據(jù)點的鼠標跟蹤氣泡顯示。
plotOptions.area.events.checkboxClick：數(shù)據(jù)圖表中圖注中復選框的點擊事件。
plotOptions.area.events.click：數(shù)據(jù)圖表中，數(shù)據(jù)點的點擊事件。
plotOptions.area.events.hide：數(shù)據(jù)圖表中，某一數(shù)據(jù)序列隱藏時的事件。
plotOptions.area.events.show：數(shù)據(jù)圖表中，某一數(shù)據(jù)序列顯示時的事件。
plotOptions.area.events.legendItemClick：數(shù)據(jù)圖表中，圖注中的項目被點擊時的事件，直接賦值false，則不可點擊。
plotOptions.area.events.mouseOut：數(shù)據(jù)點的鼠標移出事件。
plotOptions.area.events.mouseOver：數(shù)據(jù)點的鼠標經(jīng)過事件。
plotOptions.area.marker.enabled：圖表中繪圖中是否顯示點的標記符。
plotOptions.area.marker.states.hover.enabled：是否允許標記符的鼠標經(jīng)過狀態(tài)。
plotOptions.area.marker.states.select.enabled：是否允許標記符的選擇狀態(tài)。
plotOptions.area.point.events.click：圖表中每一個單獨的點點擊事件。
plotOptions.area.point.events.mouseOut
plotOptions.area.point.events..mouseOver
plotOptions.area.point.events.remove：刪除圖表中的點時的事件。
plotOptions.area.point.events.select：圖表中點選擇事件。
plotOptions.area.point.events.unselect：圖表中點取消選擇時的事件。
plotOptions.area.point.events.update：圖表中數(shù)據(jù)發(fā)生更新時的事件。
plotOptions.area.visible：加載時，數(shù)據(jù)序列默認是顯示還是隱藏。
plotOptions.area.zIndex：在多序列的情況下，調(diào)整每一個序列的層疊順序。
以上的point.events同樣還適用于其他面積類圖表（arearange、areaspline、areasplinerange），其他的柱狀圖（bar、column）及所有圖表。
plotOptions.area.showInLegend：是否在圖注中顯示。
plotOptions.area.stacking：是以值堆疊，還是以百分比堆疊。
plotOptions.area.states.hover.enabled：鼠標放上的狀態(tài)是否允許。
plotOptions.area.stickyTracking：鼠標粘性跟蹤數(shù)據(jù)點。
plotOptions.arearange，plotOptions.areaspline，plotOptions.areasplinerange類同于plotOptions.area
plotOptions.bar.groupPadding：對于柱狀圖分組，每個分組之間的間隔。
plotOptions.bar.grouping：是否對數(shù)據(jù)進行分組。
plotOptions.bar.minPointLength:：定義當point值為零時，點的最小長度為多少
plotOptions.bar.showInLegend：是否在圖注中顯示。
plotOptions.bar.stacking：是以值堆疊，還是以百分比堆疊（normal/percent）。
plotOptions.column，plotOptions.columnrange類同于plotOptions.bar
plotOptions.line的相關(guān)配置類似于plotOptions.area配置。
plotOptions.pie.ignoreHiddenPoint：在餅狀圖中，某一個序列經(jīng)圖注點擊隱藏后，整個餅狀圖是重新以100%分配，還是只在原圖基礎(chǔ)上隱藏，呈現(xiàn)一個缺口。
plotOptions.pie.innerSize：繪制餅狀圖時，餅狀圖的圓心預留多大的空白。
plotOptions.pie.slicedOffset：與allowPointSelect結(jié)合使用，當點被點擊時，對應的扇區(qū)剝離，這個參數(shù)即配置離開的距離。
plotOptions.pie的其他常用配置參數(shù)類同于plotOptions.area,plotOptions.scatter，plotOptions.series，plotOptions.spline的相關(guān)配置類似于plotOptions.area配置。
series：是一個數(shù)組。
series.data.color：某一個數(shù)據(jù)的顏色。
series.data.dataLabels：序列中某一個數(shù)據(jù)的數(shù)據(jù)標簽。
series.data.events類同于plotOptions.area.point.events的相關(guān)配置。
series.data.marker類同于plotOptions.area.marker的相關(guān)配置。
series.data.name：配置數(shù)據(jù)點的名稱。
series.data.sliced：配置在餅圖中，扇區(qū)的分離距離大小。
series.data.x：點的x值。
series.data.y：點的y值。
series.name：數(shù)據(jù)序列的名稱。
series.stack：堆疊的分組索引。
series.type：數(shù)據(jù)序列的展示類型。
series.xAxis，series.yAxis：當使用多坐標軸時，指定某個數(shù)列對應哪個坐標軸。
subtitle：配置圖表的子標題。
title：配置圖表的標題。
tooltip：配置圖表中數(shù)據(jù)的氣泡提示。
tooltip.valueDecimals：允許的小數(shù)點位數(shù)。
tooltip.percentageDecimals：允許百分比的小數(shù)點后位數(shù)。
xAxis，yAxis配置設(shè)置坐標軸
allowDecimals：坐標軸上是否允許小數(shù)。
categories：是一個數(shù)組，坐標軸的分類。
plotLines：繪制主線。
tickColor：刻度顏色。
tickInterval：刻度的步進值。
labels.rotation：刻度標簽旋轉(zhuǎn)度數(shù)
Chart：圖表區(qū)選項
Chart圖表區(qū)選項用于設(shè)置圖表區(qū)相關(guān)屬性。
| backgroundColor | 設(shè)置圖表區(qū)背景色 | #FFFFFF |
| borderWidth | 設(shè)置圖表邊框?qū)挾?/td> | 0 |
| borderRadius | 設(shè)置圖表邊框圓角角度 | 5 |
| renderTo | 圖表放置的容器，一般在html中放置一個DIV，獲取DIV的id屬性值 | null |
| defaultSeriesType | 默認圖表類型line, spline, area, areaspline, column, bar, pie , scatter | 0 |
| width | 圖表寬度，默認根據(jù)圖表容器自適應寬度 | null |
| height | 圖表高度，默認根據(jù)圖表容器自適應高度 | null |
| margin | 設(shè)置圖表與其他元素之間的間距，數(shù)組，如[0,0,0,0] | [null] |
| plotBackgroundColor | 主圖表區(qū)背景色，即X軸與Y軸圍成的區(qū)域的背景色 | null |
| plotBorderColor | 主圖表區(qū)邊框的顏色，即X軸與Y軸圍成的區(qū)域的邊框顏色 | null |
| plotBorderWidth | 主圖表區(qū)邊框的寬度 | 0 |
| shadow | 是否設(shè)置陰影，需要設(shè)置背景色backgroundColor。 | false |
| reflow | 是否自使用圖表區(qū)域高度和寬度，如果沒有設(shè)置width和height時，會自適應大小。 | true |
| zoomType | 拖動鼠標進行縮放，沿x軸或y軸進行縮放，可以設(shè)置為：'x','y','xy' | '' |
| events | 事件回調(diào)，支持addSeries方法，click方法，load方法，selection方法等的回調(diào)函數(shù)。 | ? |
Color：顏色選項
Color顏色選項用于設(shè)置圖表的顏色方案。
| 參數(shù) | 描述 | 默認值 |
| color | 用于展示圖表，折線/柱狀/餅狀等圖的顏色，數(shù)組形式。 | array |
Highcharts已經(jīng)默認提供了多種顏色方案，當要顯示的圖形多于顏色種類時，多出的圖形會自動從第一種顏色方案開始選取。自定義顏色方案的方法：
Highcharts.setOptions({colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'] });Title：標題選項
Title標題選項用于設(shè)置圖表的標題相關(guān)屬性。
| text | 標題文本內(nèi)容。 | Chart title |
| align | 水平對齊方式。 | center |
| verticalAlign | 垂直對齊方式。 | top |
| margin | 標題與副標題之間或者主圖表區(qū)間的間距。 | 15 |
| floating | 是否浮動，如果為true，則標題可以偏離主圖表區(qū)，可配合x,y屬性使用。 | false |
| style | 設(shè)置CSS樣式。 | {color: '#3E576F', fontSize: '16px'} |
Subtitle：副標題選項
副標題提供的屬性選項與標題title大致相同，可參照上述標題選項，值得一提的是副標題的text選項默認為''，即空的，所以默認情況下副標題不顯示。
xAxis：X軸選項
X軸選項用于設(shè)置圖表X軸相關(guān)屬性。
| categories | 設(shè)置X軸分類名稱，數(shù)組，例如：categories: ['Apples', 'Bananas', 'Oranges'] | [] |
| title | X軸名稱，支持text、enabled、align、rotation、style等屬性 | ? |
| labels | 設(shè)置X軸各分類名稱的樣式style，格式formatter，角度rotation等。 | array |
| max | X軸最大值(categories為空時)，如果為null，則最大值會根據(jù)X軸數(shù)據(jù)自動匹配一個最大值。 | null |
| min | X軸最小值(categories為空時)，如果為null，則最小值會根據(jù)X軸數(shù)據(jù)自動匹配一個最小值。 | array |
| gridLineColor | 網(wǎng)格（豎線）顏色 | #C0C0C0 |
| gridLineWidth | 網(wǎng)格(豎線)寬度 | 1 |
| lineColor | 基線顏色 | #C0D0E0 |
| lineWidth | 基線寬度 | 0 |
yAxis：Y軸選項
Y軸選項與上述xAxis選項基本一致，請參照上表中的參數(shù)設(shè)置，不再單獨列出。
Series：數(shù)據(jù)列選項
數(shù)據(jù)列選項用于設(shè)置圖表中要展示的數(shù)據(jù)相關(guān)的屬性。
| data | 顯示在圖表中的數(shù)據(jù)列，可以為數(shù)組或者JSON格式的數(shù)據(jù)。如：data:[0, 5, 3, 5]，或 data: [{name: 'Point 1',y: 0}, {name: 'Point 2',y: 5}] | '' |
| name | 顯示數(shù)據(jù)列的名稱。 | '' |
| type | 數(shù)據(jù)列類型，支持 area, areaspline, bar, column, line, pie, scatter or spline | line |
plotOptions：數(shù)據(jù)點選項
plotOptions用于設(shè)置圖表中的數(shù)據(jù)點相關(guān)屬性。plotOptions根據(jù)各種圖表類型，其屬性設(shè)置略微有些差異，現(xiàn)將常用選項列出來。
| 參數(shù) | 描述 | 默認值 |
| enabled | 是否在數(shù)據(jù)點上直接顯示數(shù)據(jù) | false |
| allowPointSelect | 是否允許使用鼠標選中數(shù)據(jù)點 | false |
| formatter | 回調(diào)函數(shù)，格式化數(shù)據(jù)顯示內(nèi)容 | formatter: function() {return this.y;} |
Tooltip：數(shù)據(jù)點提示框
Tooltip用于設(shè)置當鼠標滑向數(shù)據(jù)點時顯示的提示框信息。
| 參數(shù) | 描述 | 默認值 |
| enabled | 是否顯示提示框 | true |
| backgroundColor | 設(shè)置提示框的背景色 | rgba(255, 255, 255, .85) |
| borderColor | 提示框邊框顏色，默認自動匹配數(shù)據(jù)列的顏色 | auto |
| borderRadius | 提示框圓角度 | 5 |
| shadow | 是否顯示提示框陰影 | true |
| style | 設(shè)置提示框內(nèi)容樣式，如字體顏色等 | color:'#333' |
| formatter | 回調(diào)函數(shù)，用于格式化輸出提示框的顯示內(nèi)容。返回的內(nèi)容支持html標簽如：<b>, <strong>, <i>, <em>, <br/>, <span> | 2 |
Legend：圖例選項
legend用于設(shè)置圖例相關(guān)屬性。
| layout | 顯示形式，支持水平horizontal和垂直vertical | horizontal |
| align | 對齊方式。 | center |
| backgroundColor | 圖例背景色。 | null |
| borderColor | 圖例邊框顏色。 | #909090 |
| borderRadius | 圖例邊框角度 | 5 |
| enabled | 是否顯示圖例 | true |
| floating | 是否可以浮動，配合x，y屬性。 | false |
| shadow | 是否顯示陰影 | false |
| style | 設(shè)置圖例內(nèi)容樣式 | '' |
更多詳細信息請參照highcharts官網(wǎng)英文文檔：http://api.highcharts.com/highcharts
??
?
?
?
?
轉(zhuǎn)載于:https://www.cnblogs.com/xuaijun/p/7908234.html
總結(jié)
以上是生活随笔為你收集整理的Highcharts 配置语法；Highcharts 配置选项详细说明的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
