HighCharts報(bào)表 API

?

一.chart的部分相關(guān)屬性說明
?

? ?renderTo: 'container',????? //圖表的頁面顯示容器(也就是要顯示到的div)
?? ?defaultSeriesType: 'line',? //圖表類型(line、spline、scatter、splinearea、bar、pie、area、column)
?? ?marginRight: 50,??????????? //上下左右空隙(圖表跟圖框之間)
?? ?marginBottom: 60,?????????? //下面空隙如果不夠大，圖例說明有可能看不到
?? ?plotBackgroundImage: '../graphics/skies.jpg', //(圖表的)背景圖片
?? ?plotBackgroundColor:??????? //背景顏色
?? ?width: 1000,??????????????? //圖框（最外層）寬(默認(rèn)800)
?? ?height: 500,??????????????? //圖框高(默認(rèn)500)?
?? ?backgroundColor: "red"????? //圖框的背景顏色
?? ?borderColor: "red"????????? //圖框的邊框顏色
?? ?borderRadius: 5,??????????? //圖框的圓角大小
?? ?borderWidth: 9,???????????? //圖框的邊框大小
?? ?inverted: false,??????????? //(使圖)倒置
?? ?plotBorderColor: "red",???? //圖表的邊框顏色
?? ?plotBorderWidth: 0,???????? //圖表的邊框大小
?? ?plotShadow: false,????????? //圖表是否使用陰影效果
?? ?reflow: false,? ?
?? ?shadow:true???????????????? //圖框是否使用陰影
?? ?showAxes: false,??????????? //是否最初顯示軸
?? ?spacingTop: 100,??????????? //圖表上方的空白
?? ?spacingRight: 10,
?? ?spacingBottom: 15,
?? ?spacingLeft: 10,
?? ?colors: [...]???????????????? //圖上線。。的顏色

二. credits的部分相關(guān)屬性說明
?? ?credits:? //設(shè)置右下角的標(biāo)記。highchart.com (這個(gè)也可以在highcharts.js里中修改)
?? ?{?? ?
?? ??? ?//enabled: true,????? //是否顯示
?? ??? ?position: {?????????? //顯示的位置????????????????? ?
?? ??? ???? align: 'left',????? ?
?? ??? ???? x: 10????????????????????????? ?
?? ??? ?},
?? ??? ?text: "xoyo.com",?????????? //顯示的文字
?? ??? ?style:{???????????????????? //樣式
?? ??? ???? cursor: 'pointer',
?? ??? ???? color: 'red',
?? ??? ???? fontSize: '20px'
?? ??? ?},
?? ??? ?href: 'http://www.xoyo.com', //路徑
?? ?},
三. title的部分相關(guān)屬性說明
?? ?title: //標(biāo)題
?? ?{?
?? ??? ?text: '月份平均溫度',
?? ??? ?x: -20,????????????????? //center //水平偏移量?
?? ??? ?y: 100?????????????????? //y:垂直偏移量
?? ??? ?align: 'right'?? ??? ? //水平方向（left, right, bottom, top）
?? ??? ?floating: true,????????? //是否浮動(dòng)顯示
?? ??? ?margin: 15,
?? ??? ?style: ,???????????????? //樣式
?? ??? ?verticalAlign: "left"??? //垂直方向（left, right, bottom, top）
?? ?},
四. xAxis或者YAxis的部分相關(guān)屬性說明
?? ?categories: ['一月', '二月'],
?? ?//allowDecimals: false
?? ?//alternateGridColor: 'red'?????? //在圖表中相隔出現(xiàn)縱向的顏色格柵
?? ?//dateTimeLabelFormats: ,
?? ?//endOnTick: false,?????????????? //是否顯示控制軸末端的一個(gè)cagegories出來
?? ?//events: {
?? ?//setExtremes:
?? ?//},
?? ?//gridLineColor: "red",?????????? //縱向格線的顏色
?? ?//gridLineDashStyle: Solid??????? //縱向格柵線條的類型
?? ?//gridLineWidth: 5,?????????????? //縱向格線的的大小
?? ?//id: null,
?? ?//labels: {? //X軸的標(biāo)簽（下面的說明）
?? ???? //align: "center",????????????? //位置
?? ???? //enabled: false,?????????????? //是否顯示
?? ???? //formatter: ,
?? ???? //rotation: 90,???????????????? //旋轉(zhuǎn),效果就是影響標(biāo)簽的顯示方向
?? ???? //staggerLines: 4,????????????? //標(biāo)簽的交錯(cuò)顯示（上、下）
?? ???? //step: 2,????????????????????? //標(biāo)簽的相隔顯示的步長
?? ???? //style:{},
?? ???? //x: 100,???????????????????? //偏移量，默認(rèn)兩個(gè)都是0，
?? ???? //y: 40
?? ??? ?
?? ?//},
?? ?//lineColor: "red",?????????????? //X軸的顏色
?? ?//lineWidth: 5,?????????????????? //X軸的寬度
?? ?//linkedTo:1,
?? ?//opposite: true????????????????? //是否把標(biāo)簽顯示到對(duì)面
?? ?//max: 12,??????????????????????? //顯示的最大值
?? ?//maxPadding: 6,
?? ?//maxZoom: 1,
?? ?//min: 10,??????????????????????? //顯示的最小值
?? ?//minorGridLineColor: 'red',??????? //副格線的顏色
?? ?//minorGridLineDashStyle: 'blod', //副格線的的顏色
?? ?//minorGridLineWidth: 50,???????? //副格線的寬度
?? ?//minorTickColor: #A0A0A0,??????? //???沒有看出效果
?? ?minorTickInterval:3,?????????????? //副標(biāo)記的間隔
?? ?//minorTickLength: 10,???????????? //副標(biāo)記的長度
?? ?//minorTickPosition: 'inside',???? //副標(biāo)記的位置
?? ?//minorTickWidth: 5,?????????????? //副標(biāo)記的寬
?? ?//minPadding: 0.01,
?? ?//offset: 0,?????????????????????? //坐標(biāo)軸跟圖的距離
?? ?//plotBands: //使某數(shù)據(jù)塊顯示不同的效果?? ?
?? ?//plotLines: [{???????? //標(biāo)線屬性
?? ???? //value: 0,????? //值為0的標(biāo)線
?? ?//}],?? ??? ?
?? ?//tickmarkPlacement: "on",?? //標(biāo)記(文字)顯示的位置，on表示在正對(duì)位置上。
?? ?//reversed: true,??????????? //是否倒置
?? ?//showFirstLabel: false,???? //第一個(gè)標(biāo)記的數(shù)值是否顯示
?? ?//startOfWeek: 2,
?? ?//tickColor: 'blue',???????? //標(biāo)記(坐標(biāo)的記號(hào))的顏色
?? ?//tickInterval: 20,????????? //標(biāo)記(坐標(biāo)的記號(hào))的步長
?? ?//tickLength: 5,
?? ?//tickmarkPlacement: "on",
?? ?//tickPixelInterval: 1000,?? //兩坐標(biāo)之間的寬度
?? ?//tickPosition: "inside",??? //坐標(biāo)標(biāo)記的方向
?? ?//title: {?????????????????? //設(shè)置坐標(biāo)標(biāo)題的相關(guān)屬性
?? ???? //margin: 40,
?? ???? //rotation: 90,
?? ???? //text: "Y-values",
?? ???? //align: "middle",
?? ???? //enabled: "middle",
?? ???? //style: {color: 'red'}
?? ?//},
?? ?//type: "linear"
五.tooltip的部分相關(guān)屬性說明
?? ?tooltip: //提示框設(shè)置
?? ?{???? ?
?? ??? ?formatter: function() {? //格式化提示框的內(nèi)容樣式
?? ??? ?return '<b>'+ this.series.name +'</b><br/>'+
?? ??? ??? ??? ?this.x +': '+ this.y +'°C';
?? ??? ?},????????????????????? ?
?? ??? ?backgroundColor: '#CCCCCC',?? //背景顏色
?? ??? ?//borderColor: '#FCFFC5'????? //邊框顏色
?? ??? ?//borderRadius: 2???????????? //邊框的圓角大小
?? ??? ?borderWidth: 3,?????????????? //邊框?qū)挾?大小)
?? ??? ?//enabled: false,???????????? //是否顯示提示框
?? ??? ?//shadow: false,????????????? //提示框是否應(yīng)用陰影? ?沒有看出明顯效果?????????
?? ??? ?//shared: true,?????????????? //當(dāng)打開這個(gè)屬性，鼠標(biāo)幾個(gè)某一區(qū)域的時(shí)候，如果有多條線，所有的線上的據(jù)點(diǎn)都會(huì)有響應(yīng)(ipad)
?? ??? ?//snap: 0,??????????????????? //沒有看出明顯效果?????????
?? ??? ?crosshairs: {???????????????? //交叉點(diǎn)是否顯示的一條縱線
?? ??? ???? width: 2,
?? ??? ???? color: 'gray',
?? ??? ??? dashStyle: 'shortdot'
?? ??? ?}
?? ??? ?style: {? //提示框內(nèi)容的樣式
?? ??? ???? color: 'white',
?? ??? ???? padding: '10px',??? //內(nèi)邊距 (這個(gè)會(huì)常用到)
?? ??? ???? fontSize: '9pt',?? ??? ??? ?
?? ??? ?}
?? ?},
六.legend(圖例說明)的部分相關(guān)屬性說明
?? ?legend: //圖例說明
?? ?{? ?
?? ??? ?//layout: 'vertical',?? //圖例說明布局（垂直顯示,默認(rèn)橫向顯示）
?? ??? ?align: 'center',??????? //圖例說明的顯示位置
?? ??? ?//verticalAlign: 'top', //縱向的位置
?? ??? ?//x: 250,???????????????? //偏移量?
?? ??? ?//y: 0,????????????? ?
?? ??? ?borderWidth: 1,??????????? //邊框?qū)挾?br style="line-height:normal;" /> ?? ??? ?//backgroundColor: 'red'?? //背景顏色
?? ??? ?borderColor: 'red',
?? ??? ?//borderRadius???????????? //邊框圓角
?? ??? ?//enabled: false????????? //是否顯示圖例說明
?? ??? ?//floating:true?????????? //是否浮動(dòng)顯示(效果就是會(huì)不會(huì)顯示到圖中)
?? ??? ?//itemHiddenStyle: {color: 'red'},
?? ??? ?//itemHoverStyle: {color: 'red'}?? //鼠標(biāo)放到某一圖例說明上，文字顏色的變化顏色
?? ??? ?//itemStyle:? {color: 'red'}?? //圖例說明的樣式
?? ??? ?//itemWidth:?????????????????? //圖例說明的寬度
?? ??? ?//labelFormatter: function() { return this.value}?????? //?????????????默認(rèn)(return this.name)
?? ??? ?//lineHeight: 1000???????????? //沒看出明顯效果
?? ??? ?//margin: 20
?? ??? ?//reversed:true??????????????? //圖例說明的順序（是否反向）
?? ??? ?//shadow:true????????????????? //陰影
?? ??? ?//style: {color:'black'}
?? ??? ?//symbolPadding: 100?????????? //標(biāo)志（線）跟文字的距離
?? ??? ?//symbolWidth: 100???????????? //標(biāo)志的寬
?? ??? ?//width:100
?? ?},
七. plotOptions的部分修改屬性說明
?? ?plotOptions: (我這個(gè)是在柱形圖上做的測試)
?? ?{ ?
?? ??? ?column: //柱形圖
?? ??? ?{
?? ??? ???? //pointPadding: 0.2,
?? ??? ???? //borderWidth: 1,?????????????? //柱子邊框的大小
?? ??? ???? //borderColor: "red",?????????? //柱子邊框的顏色
?? ??? ???? //borderRadius: 180,??????????? //柱子兩端的圓角的半徑
?? ??? ???? //colorByPoint: true,?????????? //否應(yīng)該接受每系列的一種顏色或每點(diǎn)一種顏色
?? ??? ???? groupPadding: 0,??????????????? //每一組柱子之間的間隔(會(huì)影響到柱子的大小)
?? ??? ???? //minPointLength: 0,??????????? //最小數(shù)據(jù)值那一條柱子的長度(如果是0，可能看不到，可以設(shè)置出來)
?? ??? ???? //pointPadding: 0.1,??????????? //柱子之間的間隔(會(huì)影響到柱子的大小)
?? ??? ???? //pointWidth: 2,??????????????? //柱子的大小(會(huì)影響到柱子的大小)
?? ??? ???? //allowPointSelect: false,?
?? ??? ???? //animation: true,????????????? //圖形出來時(shí)候的動(dòng)畫
?? ??? ???? //color: 'red',???????????????? //柱子的顏色
?? ??? ???? //connectNulls: false,????????? //連接圖表是否忽略零點(diǎn)(如線形圖，數(shù)據(jù)為0是是否忽略)
?? ??? ???? //cursor: '',?????????????????? //?????????游標(biāo)
?? ??? ???? //dashStyle: null,
?? ??? ???? dataLabels: { //圖上是否顯示數(shù)據(jù)標(biāo)簽
?? ??? ??? ?//enabled: true,
?? ??? ??? ?align: "center",
?? ??? ??? ?//color: 'red',
?? ??? ??? ?formatter: function()?
?? ??? ??? ?{
?? ??? ??? ???? return this.y + 'mm'
?? ??? ??? ?},
?? ??? ??? ?rotation: 270,
?? ??? ??? ?//staggerLines: 0,
?? ??? ??? ?//step: ,
?? ??? ??? ?//style: ,
?? ??? ??? ?//x: 0,
?? ??? ??? ?//y: -6
?? ??? ???? },
?? ??? ???? //enableMouseTracking:?
?? ??? ???? events: {??? //事件
?? ??? ??? ?click: function(event)
?? ??? ??? ?{
?? ??? ??? ???? alert(this.name);
?? ??? ??? ?},
?? ??? ??? ?//checkboxClick: ,
?? ??? ??? ?//hide: ,
?? ??? ??? ?//legendItemClick: ,
?? ??? ??? ?//mouseOver: ,
?? ??? ??? ?//mouseOut: ,
?? ??? ??? ?//show:
?? ??? ???? },
?? ??? ???? //id: null,
?? ??? ???? //lineWidth: 20,
?? ??? ???? //marker: {? //圖例說明上的標(biāo)志
?? ??? ??? ?//enabled: false
?? ??? ???? //},
?? ??? ???? point: {???? //圖上的數(shù)據(jù)點(diǎn)(這個(gè)在線形圖可能就直觀)
?? ??? ??? ?events: {
?? ??? ??? ???? click: function()?
?? ??? ??? ???? {
?? ??? ??? ??? ?alert(this.y);
?? ??? ??? ???? },
?? ??? ??? ???? //mouseOver: ,
?? ??? ??? ???? //mouseOut: ,
?? ??? ??? ???? //remove: ,
?? ??? ??? ???? //select: ,
?? ??? ??? ???? //unselect: ,
?? ??? ??? ???? //update:
?? ??? ??? ???? }
?? ??? ???? },
?? ??? ???? //pointStart: 0,???? //顯示圖數(shù)據(jù)點(diǎn)開始值
?? ??? ???? //pointInterval: 1,? //顯示圖數(shù)據(jù)點(diǎn)的間隔
?? ??? ???? //selected: false,
?? ??? ???? //shadow: true,
?? ??? ???? //showCheckbox: true,? //是否顯示(圖例說明的)復(fù)選框
?? ??? ???? //showInLegend: false, //是否顯示圖例說明
?? ??? ???? //stacking: 'percent', //是否堆積???
?? ??? ???? states:?
?? ??? ???? {
??????????????????????????? hover:?
?? ??? ??? ???? {
??????????????????????????????? //brightness: 0.1,
??????????????????????????????? enabled: true,??? //圖上的數(shù)據(jù)點(diǎn)標(biāo)志是否顯示
??????????????????????????????? //lineWidth: 2,??? //沒看出效果
??????????????????????????????? marker:?
?? ??? ??? ??? ?{
??????????????????????????????????? //states: ,
??????????????????????????????????? //enabled: true,???????? //數(shù)據(jù)點(diǎn)標(biāo)志是否顯示
??????????????????????????????????? //fillColor: null,?????? //數(shù)據(jù)點(diǎn)標(biāo)志填充的顏色
??????????????????????????????????? //lineColor: "#FFFFFF",? //數(shù)據(jù)點(diǎn)標(biāo)志線的顏色
??????????????????????????????????? //lineWidth: 0,????????? //數(shù)據(jù)點(diǎn)標(biāo)志線的大小
??????????????????????????????????? //radius: 45,??????????? //數(shù)據(jù)點(diǎn)標(biāo)志半徑
??????????????????????????????????? //symbol: 'triangle'//'url(http://highcharts.com/demo/gfx/sun.png)' //數(shù)據(jù)點(diǎn)標(biāo)志形狀(triangle三角形,或者用圖片等等)
??????????????????????????????? }
??????????????????????????? }
???????????????????? },
?? ??? ????? //stickyTracking: true,? //軌道粘性 (例如線圖，如果這個(gè)設(shè)置為否定，那就必須點(diǎn)到數(shù)據(jù)點(diǎn)才有反應(yīng))
?? ??? ????? //visible: true,???????? //設(shè)置為false就不顯示圖
?? ??? ????? //zIndex: null?????????? //沒有看出效果？？？
?? ?},

轉(zhuǎn)載于:https://www.cnblogs.com/8090sns/archive/2013/05/20/3088497.html

總結(jié)

以上是生活随笔為你收集整理的HighCharts报表 API的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。