碼上快樂

相關內容    簡體    繁體

Highcharts屬性

本文轉載自   查看原文   2015-12-07 11:51   2282    jquery 
  1     <%@ page language="java" contentType="text/html; charset=UTF-8"  
  2         pageEncoding="UTF-8"%>  
  3     <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  4     <html>  
  5     <head>  
  6     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  7     <title>Highcharts Demo</title>  
  8     <script type="text/javascript" src="js/jquery.min.js"></script>  
  9     <script type="text/javascript" src="js/highcharts.js"></script>  
 10     <script type="text/javascript" src="js/excanvas.compiled.js"></script>  
 11     <script type="text/javascript">  
 12     var chart;  
 13     $(document).ready(function() {  
 14         chart = new Highcharts.Chart({  
 15             chart: {  
 16                 renderTo: 'container',//設置顯示圖表的容器  
 17                 type: 'line',//設置圖表樣式，可以為line,spline, scatter, splinearea bar,pie,area,column  
 18     //          defaultSeriesType: 'column', //圖表的默認樣式  
 19     //          margin:[21, 23, 24, 54],//整個圖表的位置(上下左右的空隙)  
 20                 marginRight: 200,//右邊間距  
 21                 marginBottom: 25//底部間距/空隙  
 22     //          inverted: false,//可選，控制顯示方式，默認上下正向顯示  
 23     //          shadow:true,//外框陰影  
 24     //          backgroundColor:"#FFF",  
 25     //          animation:true,  
 26     //          borderColor:"#888",  
 27     //          borderRadius:5,  
 28     //          borderWidth:1,  
 29     //          ignoreHiddenSeries:true,  
 30     //          reflow:true,  
 31     //          plotBorderWidth:1,  
 32     //          alignTicks:true  
 33             },  
 34             labels:{//在報表上顯示的一些文本  
 35                 items:[{  
 36                     html:'本圖表數據有誤，僅用於說明相應的屬性',  
 37                     style:{left:'100px',top:'60px'}  
 38                 }, {  
 39                     html:'http://www.highcharts.com/demo',  
 40                     style:{left:'100px',top:'100px'}  
 41                 }]  
 42             },  
 43             credits:{//右下角的文本  
 44                 enabled: true,  
 45                 position: {//位置設置  
 46                     align: 'right',  
 47                     x: -10,  
 48                     y: -10  
 49                 },  
 50                 href: "http://www.highcharts.com",//點擊文本時的鏈接  
 51                 style: {  
 52                     color:'blue'  
 53                 },  
 54                 text: "Highcharts Demo"//顯示的內容  
 55             },  
 56     //        plotOptions:{//繪圖線條控制  
 57     //            spline:{  
 58     //                allowPointSelect :true,//是否允許選中點  
 59     //                animation:true,//是否在顯示圖表的時候使用動畫  
 60     //                cursor:'pointer',//鼠標移到圖表上時鼠標的樣式  
 61     //                dataLabels:{  
 62     //                   enabled :true,//是否在點的旁邊顯示數據  
 63     //                    rotation:0  
 64     //                },  
 65     //                enableMouseTracking:true,//鼠標移到圖表上時是否顯示提示框  
 66     //                events:{//監聽點的鼠標事件  
 67     //                    click: function() {  
 68     //                    }  
 69     //                },  
 70     //                marker:{  
 71     //                    enabled:true,//是否顯示點  
 72     //                   radius:3,//點的半徑  
 73     //                      fillColor:"#888"  
 74     //                    lineColor:"#000"  
 75     //                    symbol: 'url(http://highcharts.com/demo/gfx/sun.png)',//設置點用圖片來顯示  
 76     //                    states:{  
 77     //                        hover:{  
 78     //                            enabled:true//鼠標放上去點是否放大  
 79     //                                                    },  
 80     //                        select:{  
 81     //                            enabled:false//控制鼠標選中點時候的狀態  
 82     //                        }  
 83     //                    }  
 84     //               },  
 85     //                states:{  
 86     //                    hover:{  
 87     //                        enabled:true,//鼠標放上去線的狀態控制  
 88     //                        lineWidth:3  
 89     //                    }  
 90     //                },  
 91     //                stickyTracking:true,//跟蹤  
 92     //                visible:true,  
 93     //                lineWidth:2//線條粗細  
 94     //                pointStart:100,  
 95     //            }  
 96     //        },  
 97       
 98             title: {  
 99                 text: 'Monthly Average Temperature',//標題  
100                 x: -20 //center設置標題的位置  
101             },  
102             subtitle: {  
103                 text: 'Source: WorldClimate.com',//副標題  
104                 x: -20//副標題位置  
105             },  
106             xAxis: {//橫軸的數據  
107                 categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',  
108                     'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']  
109     //          lineWidth:1,//縱軸一直為空所對應的軸，即X軸  
110     //          plotLines: [{//一條豎線  
111     //               color: '#FF0000',  
112     //               width: 2,  
113     //               value: 5.5  
114     //           }]  
115     //          labels: {//設置橫軸坐標的顯示樣式  
116     //              rotation: -45,//傾斜度  
117     //              align: 'right',  
118     //              style: {  
119     //                   font: 'normal 13px Verdana, sans-serif'  
120     //                   color: 'white'  
121     //              }  
122     //          }  
123       
124             },  
125             yAxis: {  
126     //          tickInterval: 200,  //自定義刻度  
127     //          max:1000,//縱軸的最大值  
128     //          min: 0,//縱軸的最小值  
129                 title: {//縱軸標題  
130                     text: '百分數'  
131                 },  
132                 labels : {  
133                     formatter : function() {//設置縱坐標值的樣式  
134                      return this.value + '%';  
135                     }  
136                    },   
137                 plotLines: [{  
138                     value: 0,  
139                     width: 1,  
140                     color: '#808080'  
141                 }]  
142             },  
143             tooltip: {//鼠標移到圖形上時顯示的提示框  
144                 formatter: function() {  
145                         return '<b>'+ this.series.name +'</b><br/>'+  
146                         this.x +': '+ this.y +'°C';  
147                 }  
148     //          crosshairs:[{//控制十字線  
149     //              width:1,  
150     //              color:"#CCC",  
151     //              dashStyle:"longdash"  
152     //          }  
153       
154             },  
155             legend: {//方框所在的位置(不知道怎么表達)  
156                 layout: 'vertical',  
157                 align: 'right',  
158                 verticalAlign: 'top',  
159                 x: -10,  
160                 y: 100,  
161                 borderWidth: 0  
162             },  
163             series: [{//以下為縱軸數據  
164                 name: 'Tokyo',  
165                 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]  
166             }, {  
167                 name: 'New York',  
168                 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]  
169             }, {  
170                 name: 'Berlin',  
171                 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]  
172             }, {  
173                 name: 'London',  
174                 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]  
175             }]  
176         });  
177     });  
178     </script>  
179     </head>  
180     <body>  
181     <div id="container" ></div>  
182     </body>  
183     </html> 
184 
185  
186 
187  
188 
189  
190 
191  
192 
193  
194 
195 屬性說明【部分】
196 
197 一.chart的部分相關屬性說明
198     renderTo: 'container',      //圖表的頁面顯示容器(也就是要顯示到的div)
199     defaultSeriesType: 'line',  //圖表類型(line、spline、scatter、splinearea、bar、pie、area、column)
200     marginRight: 50,            //上下左右空隙(圖表跟圖框之間)
201     marginBottom: 60,           //下面空隙如果不夠大，圖例說明有可能看不到
202     plotBackgroundImage: '../graphics/skies.jpg', //(圖表的)背景圖片
203     plotBackgroundColor:        //背景顏色
204     width: 1000,                //圖框（最外層）寬(默認800)
205     height: 500,                //圖框高(默認500) 
206     backgroundColor: "red"      //圖框的背景顏色
207     borderColor: "red"          //圖框的邊框顏色
208     borderRadius: 5,            //圖框的圓角大小
209     borderWidth: 9,             //圖框的邊框大小
210     inverted: false,            //(使圖)倒置
211     plotBorderColor: "red",     //圖表的邊框顏色
212     plotBorderWidth: 0,         //圖表的邊框大小
213     plotShadow: false,          //圖表是否使用陰影效果
214     reflow: false,   
215     shadow:true                 //圖框是否使用陰影
216     showAxes: false,            //是否最初顯示軸
217     spacingTop: 100,            //圖表上方的空白
218     spacingRight: 10,
219     spacingBottom: 15,
220     spacingLeft: 10,
221     colors: [...]                 //圖上線。。的顏色
222 
223 二. credits的部分相關屬性說明
224     credits:  //設置右下角的標記。highchart.com (這個也可以在highcharts.js里中修改)
225     {    
226         //enabled: true,      //是否顯示
227         position: {           //顯示的位置                   
228             align: 'left',       
229             x: 10                           
230         },
231         text: "xoyo.com",           //顯示的文字
232         style:{                     //樣式
233             cursor: 'pointer',
234             color: 'red',
235             fontSize: '20px'
236         },
237         href: 'http://www.xoyo.com', //路徑
238     },
239 三. title的部分相關屬性說明
240     title: //標題
241     { 
242         text: '月份平均溫度',
243         x: -20,                  //center //水平偏移量 
244         y: 100                   //y:垂直偏移量
245         align: 'right'         //水平方向（left, right, bottom, top）
246         floating: true,          //是否浮動顯示
247         margin: 15,
248         style: ,                 //樣式
249         verticalAlign: "left"    //垂直方向（left, right, bottom, top）
250     },
251 四. xAxis或者YAxis的部分相關屬性說明
252     categories: ['一月', '二月'],
253     //allowDecimals: false
254     //alternateGridColor: 'red'       //在圖表中相隔出現縱向的顏色格柵
255     //dateTimeLabelFormats: ,
256     //endOnTick: false,               //是否顯示控制軸末端的一個cagegories出來
257     //events: {
258     //setExtremes:
259     //},
260     //gridLineColor: "red",           //縱向格線的顏色
261     //gridLineDashStyle: Solid        //縱向格柵線條的類型
262     //gridLineWidth: 5,               //縱向格線的的大小
263     //id: null,
264     //labels: {  //X軸的標簽（下面的說明）
265         //align: "center",              //位置
266         //enabled: false,               //是否顯示
267         //formatter: ,
268         //rotation: 90,                 //旋轉,效果就是影響標簽的顯示方向
269         //staggerLines: 4,              //標簽的交錯顯示（上、下）
270         //step: 2,                      //標簽的相隔顯示的步長
271         //style:{},
272         //x: 100,                     //偏移量，默認兩個都是0，
273         //y: 40
274         
275     //},
276     //lineColor: "red",               //X軸的顏色
277     //lineWidth: 5,                   //X軸的寬度
278     //linkedTo:1,
279     //opposite: true                  //是否把標簽顯示到對面
280     //max: 12,                        //顯示的最大值
281     //maxPadding: 6,
282     //maxZoom: 1,
283     //min: 10,                        //顯示的最小值
284     //minorGridLineColor: 'red',        //副格線的顏色
285     //minorGridLineDashStyle: 'blod', //副格線的的顏色
286     //minorGridLineWidth: 50,         //副格線的寬度
287     //minorTickColor: #A0A0A0,        //???沒有看出效果
288     minorTickInterval:3,               //副標記的間隔
289     //minorTickLength: 10,             //副標記的長度
290     //minorTickPosition: 'inside',     //副標記的位置
291     //minorTickWidth: 5,               //副標記的寬
292     //minPadding: 0.01,
293     //offset: 0,                       //坐標軸跟圖的距離
294     //plotBands: //使某數據塊顯示不同的效果    
295     //plotLines: [{         //標線屬性
296         //value: 0,      //值為0的標線
297     //}],        
298     //tickmarkPlacement: "on",   //標記(文字)顯示的位置，on表示在正對位置上。
299     //reversed: true,            //是否倒置
300     //showFirstLabel: false,     //第一個標記的數值是否顯示
301     //startOfWeek: 2,
302     //tickColor: 'blue',         //標記(坐標的記號)的顏色
303     //tickInterval: 20,          //標記(坐標的記號)的步長
304     //tickLength: 5,
305     //tickmarkPlacement: "on",
306     //tickPixelInterval: 1000,   //兩坐標之間的寬度
307     //tickPosition: "inside",    //坐標標記的方向
308     //title: {                   //設置坐標標題的相關屬性
309         //margin: 40,
310         //rotation: 90,
311         //text: "Y-values",
312         //align: "middle",
313         //enabled: "middle",
314         //style: {color: 'red'}
315     //},
316     //type: "linear"
317 五.tooltip的部分相關屬性說明
318     tooltip: //提示框設置
319     {      
320         formatter: function() {  //格式化提示框的內容樣式
321         return '<b>'+ this.series.name +'</b><br/>'+
322                 this.x +': '+ this.y +'°C';
323         },                       
324         backgroundColor: '#CCCCCC',   //背景顏色
325         //borderColor: '#FCFFC5'      //邊框顏色
326         //borderRadius: 2             //邊框的圓角大小
327         borderWidth: 3,               //邊框寬度(大小)
328         //enabled: false,             //是否顯示提示框
329         //shadow: false,              //提示框是否應用陰影  ?沒有看出明顯效果?????????
330         //shared: true,               //當打開這個屬性，鼠標幾個某一區域的時候，如果有多條線，所有的線上的據點都會有響應(ipad)
331         //snap: 0,                    //沒有看出明顯效果?????????
332         crosshairs: {                 //交叉點是否顯示的一條縱線
333             width: 2,
334             color: 'gray',
335            dashStyle: 'shortdot'
336         }
337         style: {  //提示框內容的樣式
338             color: 'white',
339             padding: '10px',    //內邊距 (這個會常用到)
340             fontSize: '9pt',            
341         }
342     },
343 六.legend(圖例說明)的部分相關屬性說明
344     legend: //圖例說明
345     {   
346         //layout: 'vertical',   //圖例說明布局（垂直顯示,默認橫向顯示）
347         align: 'center',        //圖例說明的顯示位置
348         //verticalAlign: 'top', //縱向的位置
349         //x: 250,                 //偏移量 
350         //y: 0,               
351         borderWidth: 1,            //邊框寬度
352         //backgroundColor: 'red'   //背景顏色
353         borderColor: 'red',
354         //borderRadius             //邊框圓角
355         //enabled: false          //是否顯示圖例說明
356         //floating:true           //是否浮動顯示(效果就是會不會顯示到圖中)
357         //itemHiddenStyle: {color: 'red'},
358         //itemHoverStyle: {color: 'red'}   //鼠標放到某一圖例說明上，文字顏色的變化顏色
359         //itemStyle:  {color: 'red'}   //圖例說明的樣式
360         //itemWidth:                   //圖例說明的寬度
361         //labelFormatter: function() { return this.value}       //?????????????默認(return this.name)
362         //lineHeight: 1000             //沒看出明顯效果
363         //margin: 20
364         //reversed:true                //圖例說明的順序（是否反向）
365         //shadow:true                  //陰影
366         //style: {color:'black'}
367         //symbolPadding: 100           //標志（線）跟文字的距離
368         //symbolWidth: 100             //標志的寬
369         //width:100
370     },
371 七. plotOptions的部分修改屬性說明
372     plotOptions: (我這個是在柱形圖上做的測試)
373     {  
374         column: //柱形圖
375         {
376             //pointPadding: 0.2,
377             //borderWidth: 1,               //柱子邊框的大小
378             //borderColor: "red",           //柱子邊框的顏色
379             //borderRadius: 180,            //柱子兩端的圓角的半徑
380             //colorByPoint: true,           //否應該接受每系列的一種顏色或每點一種顏色
381             groupPadding: 0,                //每一組柱子之間的間隔(會影響到柱子的大小)
382             //minPointLength: 0,            //最小數據值那一條柱子的長度(如果是0，可能看不到，可以設置出來)
383             //pointPadding: 0.1,            //柱子之間的間隔(會影響到柱子的大小)
384             //pointWidth: 2,                //柱子的大小(會影響到柱子的大小)
385             //allowPointSelect: false, 
386             //animation: true,              //圖形出來時候的動畫
387             //color: 'red',                 //柱子的顏色
388             //connectNulls: false,          //連接圖表是否忽略零點(如線形圖，數據為0是是否忽略)
389             //cursor: '',                   //?????????游標
390             //dashStyle: null,
391             dataLabels: { //圖上是否顯示數據標簽
392             //enabled: true,
393             align: "center",
394             //color: 'red',
395             formatter: function() 
396             {
397                 return this.y + 'mm'
398             },
399             rotation: 270,
400             //staggerLines: 0,
401             //step: ,
402             //style: ,
403             //x: 0,
404             //y: -6
405             },
406             //enableMouseTracking: 
407             events: {    //事件
408             click: function(event)
409             {
410                 alert(this.name);
411             },
412             //checkboxClick: ,
413             //hide: ,
414             //legendItemClick: ,
415             //mouseOver: ,
416             //mouseOut: ,
417             //show:
418             },
419             //id: null,
420             //lineWidth: 20,
421             //marker: {  //圖例說明上的標志
422             //enabled: false
423             //},
424             point: {     //圖上的數據點(這個在線形圖可能就直觀)
425             events: {
426                 click: function() 
427                 {
428                 alert(this.y);
429                 },
430                 //mouseOver: ,
431                 //mouseOut: ,
432                 //remove: ,
433                 //select: ,
434                 //unselect: ,
435                 //update:
436                 }
437             },
438             //pointStart: 0,     //顯示圖數據點開始值
439             //pointInterval: 1,  //顯示圖數據點的間隔
440             //selected: false,
441             //shadow: true,
442             //showCheckbox: true,  //是否顯示(圖例說明的)復選框
443             //showInLegend: false, //是否顯示圖例說明
444             //stacking: 'percent', //是否堆積???
445             states: 
446             {
447                             hover: 
448                 {
449                                 //brightness: 0.1,
450                                 enabled: true,    //圖上的數據點標志是否顯示
451                                 //lineWidth: 2,    //沒看出效果
452                                 marker: 
453                 {
454                                     //states: ,
455                                     //enabled: true,         //數據點標志是否顯示
456                                     //fillColor: null,       //數據點標志填充的顏色
457                                     //lineColor: "#FFFFFF",  //數據點標志線的顏色
458                                     //lineWidth: 0,          //數據點標志線的大小
459                                     //radius: 45,            //數據點標志半徑
460                                     //symbol: 'triangle'//'url(http://highcharts.com/demo/gfx/sun.png)' //數據點標志形狀(triangle三角形,或者用圖片等等)
461                                 }
462                             }
463                      },
464              //stickyTracking: true,  //軌道粘性 (例如線圖，如果這個設置為否定，那就必須點到數據點才有反應)
465              //visible: true,         //設置為false就不顯示圖
466              //zIndex: null           //沒有看出效果？？？
467     },

 

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
  2.     pageEncoding="UTF-8"%>  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  4. <html>  
  5. <head>  
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  7. <title>Highcharts Demo</title>  
  8. <script type="text/javascript" src="js/jquery.min.js"></script>  
  9. <script type="text/javascript" src="js/highcharts.js"></script>  
  10. <script type="text/javascript" src="js/excanvas.compiled.js"></script>  
  11. <script type="text/javascript">  
  12. var chart;  
  13. $(document).ready(function() {  
  14.     chart = new Highcharts.Chart({  
  15.         chart: {  
  16.             renderTo: 'container',//設置顯示圖表的容器  
  17.             type: 'line',//設置圖表樣式，可以為line,spline, scatter, splinearea bar,pie,area,column  
  18. //          defaultSeriesType: 'column', //圖表的默認樣式  
  19. //          margin:[21, 23, 24, 54],//整個圖表的位置(上下左右的空隙)  
  20.             marginRight: 200,//右邊間距  
  21.             marginBottom: 25//底部間距/空隙  
  22. //          inverted: false,//可選，控制顯示方式，默認上下正向顯示  
  23. //          shadow:true,//外框陰影  
  24. //          backgroundColor:"#FFF",  
  25. //          animation:true,  
  26. //          borderColor:"#888",  
  27. //          borderRadius:5,  
  28. //          borderWidth:1,  
  29. //          ignoreHiddenSeries:true,  
  30. //          reflow:true,  
  31. //          plotBorderWidth:1,  
  32. //          alignTicks:true  
  33.         },  
  34.         labels:{//在報表上顯示的一些文本  
  35.             items:[{  
  36.                 html:'本圖表數據有誤，僅用於說明相應的屬性',  
  37.                 style:{left:'100px',top:'60px'}  
  38.             }, {  
  39.                 html:'http://www.highcharts.com/demo',  
  40.                 style:{left:'100px',top:'100px'}  
  41.             }]  
  42.         },  
  43.         credits:{//右下角的文本  
  44.             enabled: true,  
  45.             position: {//位置設置  
  46.                 align: 'right',  
  47.                 x: -10,  
  48.                 y: -10  
  49.             },  
  50.             href: "http://www.highcharts.com",//點擊文本時的鏈接  
  51.             style: {  
  52.                 color:'blue'  
  53.             },  
  54.             text: "Highcharts Demo"//顯示的內容  
  55.         },  
  56. //        plotOptions:{//繪圖線條控制  
  57. //            spline:{  
  58. //                allowPointSelect :true,//是否允許選中點  
  59. //                animation:true,//是否在顯示圖表的時候使用動畫  
  60. //                cursor:'pointer',//鼠標移到圖表上時鼠標的樣式  
  61. //                dataLabels:{  
  62. //                   enabled :true,//是否在點的旁邊顯示數據  
  63. //                    rotation:0  
  64. //                },  
  65. //                enableMouseTracking:true,//鼠標移到圖表上時是否顯示提示框  
  66. //                events:{//監聽點的鼠標事件  
  67. //                    click: function() {  
  68. //                    }  
  69. //                },  
  70. //                marker:{  
  71. //                    enabled:true,//是否顯示點  
  72. //                   radius:3,//點的半徑  
  73. //                      fillColor:"#888"  
  74. //                    lineColor:"#000"  
  75. //                    symbol: 'url(http://highcharts.com/demo/gfx/sun.png)',//設置點用圖片來顯示  
  76. //                    states:{  
  77. //                        hover:{  
  78. //                            enabled:true//鼠標放上去點是否放大  
  79. //                                                    },  
  80. //                        select:{  
  81. //                            enabled:false//控制鼠標選中點時候的狀態  
  82. //                        }  
  83. //                    }  
  84. //               },  
  85. //                states:{  
  86. //                    hover:{  
  87. //                        enabled:true,//鼠標放上去線的狀態控制  
  88. //                        lineWidth:3  
  89. //                    }  
  90. //                },  
  91. //                stickyTracking:true,//跟蹤  
  92. //                visible:true,  
  93. //                lineWidth:2//線條粗細  
  94. //                pointStart:100,  
  95. //            }  
  96. //        },  
  97.   
  98.         title: {  
  99.             text: 'Monthly Average Temperature',//標題  
  100.             x: -20 //center設置標題的位置  
  101.         },  
  102.         subtitle: {  
  103.             text: 'Source: WorldClimate.com',//副標題  
  104.             x: -20//副標題位置  
  105.         },  
  106.         xAxis: {//橫軸的數據  
  107.             categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',  
  108.                 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']  
  109. //          lineWidth:1,//縱軸一直為空所對應的軸，即X軸  
  110. //          plotLines: [{//一條豎線  
  111. //               color: '#FF0000',  
  112. //               width: 2,  
  113. //               value: 5.5  
  114. //           }]  
  115. //          labels: {//設置橫軸坐標的顯示樣式  
  116. //              rotation: -45,//傾斜度  
  117. //              align: 'right',  
  118. //              style: {  
  119. //                   font: 'normal 13px Verdana, sans-serif'  
  120. //                   color: 'white'  
  121. //              }  
  122. //          }  
  123.   
  124.         },  
  125.         yAxis: {  
  126. //          tickInterval: 200,  //自定義刻度  
  127. //          max:1000,//縱軸的最大值  
  128. //          min: 0,//縱軸的最小值  
  129.             title: {//縱軸標題  
  130.                 text: '百分數'  
  131.             },  
  132.             labels : {  
  133.                 formatter : function() {//設置縱坐標值的樣式  
  134.                  return this.value + '%';  
  135.                 }  
  136.                },   
  137.             plotLines: [{  
  138.                 value: 0,  
  139.                 width: 1,  
  140.                 color: '#808080'  
  141.             }]  
  142.         },  
  143.         tooltip: {//鼠標移到圖形上時顯示的提示框  
  144.             formatter: function() {  
  145.                     return '<b>'+ this.series.name +'</b><br/>'+  
  146.                     this.x +': '+ this.y +'°C';  
  147.             }  
  148. //          crosshairs:[{//控制十字線  
  149. //              width:1,  
  150. //              color:"#CCC",  
  151. //              dashStyle:"longdash"  
  152. //          }  
  153.   
  154.         },  
  155.         legend: {//方框所在的位置(不知道怎么表達)  
  156.             layout: 'vertical',  
  157.             align: 'right',  
  158.             verticalAlign: 'top',  
  159.             x: -10,  
  160.             y: 100,  
  161.             borderWidth: 0  
  162.         },  
  163.         series: [{//以下為縱軸數據  
  164.             name: 'Tokyo',  
  165.             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]  
  166.         }, {  
  167.             name: 'New York',  
  168.             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]  
  169.         }, {  
  170.             name: 'Berlin',  
  171.             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]  
  172.         }, {  
  173.             name: 'London',  
  174.             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]  
  175.         }]  
  176.     });  
  177. });  
  178. </script>  
  179. </head>  
  180. <body>  
  181. <div id="container" ></div>  
  182. </body>  
  183. </html> 

 

 

 

 

 

屬性說明【部分】

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


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 highcharts屬性設置 Highcharts的常用屬性及導出SVG 【HighCharts系列教程】八、Html標簽屬性——Labels 【HighCharts系列教程】四、顏色屬性——colors 【HighCharts系列教程】七、導出屬性——exporting 【HighCharts系列教程】十、圖例屬性——legend highcharts 設置Highchart柱子最大寬度（ 讓 highcharts支持maxPointWidth屬性） highcharts圖表史上最全的參數配置(屬性+事件) Highcharts的基本屬性和方法詳解-column:柱形圖plotOptions的部分修改屬性說明
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM