highcharts使用總結

Highcharts 官網：http://www.highcharts.com

Highcharts 官網示例：http://www.highcharts.com/demo/

Highcharts 官網文檔：http://api.highcharts.com/highcharts#plotOptions.pie.dataLabels

屬性參考：http://blog.163.com/[email protected]/blog/static/10588885920135715312843/

一.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" //圖框的背景顔色背景設為透明：backgroundColor: 'rgba(0,0,0,0)'

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/subtitle的部分相關屬性說明 --設定标題/副标題

title: //标題

{

text: '月份平均溫度', //還可以寫設定标題樣式

x: -20, //center //水準偏移量

y: 100 //y:垂直偏移量

align: 'right' //水準方向（left, right, bottom, top,center）

floating: true, //是否浮動顯示

margin: 15,

style: , //樣式

verticalAlign: "left" //垂直方向（left, right, bottom, top,middle）

四. 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 ''+ this.series.name +' '+

this.x +': '+this.y+'°C'; //如果有第三個資料(this.point.z)，比如汽包bubble,

</pre><pre name="code" class="html">                tooltip: {
                    enabled: true,
                    formatter: function () {
                        return '<span>●</span><b>' + this.series.name + '</b><br/>' + "核載數：" + SplitData(this.y) + "<br/>實載數:" + SplitData(this.x) + "<br/>營運收入:" + SplitData(this.point.z);
                    }
                },

//bubble

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 //沒有看出效果？？？

八、Color：顔色選項

Color顔色選項用于設定圖表的顔色方案。

參數描述預設值

color 用于展示圖表，折線/柱狀/餅狀等圖的顔色，數組形式。 array

Highcharts已經預設提供了多種顔色方案，當要顯示的圖形多于顔色種類時，多出的圖形會自動從第一種顔色方案開始選取。自定義顔色方案的方法：

Highcharts.setOptions({

colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655',

'#FFF263', '#6AF9C4']

});

九、Series：資料列選項

資料列選項用于設定圖表中要展示的資料相關的屬性。

參數描述預設值

data 顯示在圖表中的資料列，可以為數組或者JSON格式的資料。如：data:[0, 5, 3, 5]，或

data: [{name: 'Point 1',y: 0}, {name: 'Point 2',y: 5}] ''

name 顯示資料列的名稱。 ''

type 資料列類型，支援 area, areaspline, bar, column, line, pie, scatter or spline

size: '110%', //用于餅圖

innerSize: '110%', //用于餅圖

dataLabels: { //用于餅圖

formatter: function () {

return this.y > 1 ? '' + this.point.name + ': ' + this.y +'%' : null;

}

color:'#fad36c' //設定顔色

marker: { //用于line

lineWidth: 2,

lineColor: Highcharts.getOptions().colors[7],

fillColor: 'white'

}

動态加載資料：

function GetMileageData() {
            $.ajax({
                type: "POST",     //要用post方式     
                url: "../Ajax/WebServiceHandler.aspx/GetStationIncome",
                contentType: "application/json",
                data: {},
                dataType: "json",
                success: function (data) {
                    var dataLength = data.d.length; 
                    var dataSeries = new Array();
                    for (var i = 0; i < dataLength; i++) {
                        var strTitle = data.d[i]["StatYear"];
                        var data0 = [];
                        data0.push(data.d[i]["Data1"]);
                        data0.push(data.d[i]["Data2"]);
                        data0.push(data.d[i]["Data3"]);
                        var data1 = [];
                        data1.push(data0); 
                        var dataS = { name: strTitle, data: data1 };
                        dataSeries.push(dataS);
                    } 
                    GetStationIncome(dataSeries);
                },
                error: function (err) {
                    alert("營運裡程人數資料出錯！");
                }
            });
        }

十一、highCharts 去掉Highcharts.com連結和導出的方法：

1.Highcharts JS去除Highcharts.com連結的方法在js檔案中找到Credits，然後把enable的屬性從!0改為0。也可以更改為自己需要的：

credits: {
enabled: false
},

enabled:設定是否顯示連結 text：設定連結顯示的名稱 href：設定連結的url 2.去掉圖檔右上角的列印及導出按鈕在js中設定以下代碼： exporting:{ enabled:true //用來設定是否顯示‘列印’,'導出'等功能按鈕，不設定時預設為顯示 }, 3.Highcharts JS去除列印功能 exporting.js 圖表庫去掉以下代碼

printButton : {

symbol :"printIcon",

x :-36,

symbolFill :"#B5C9DF",

hoverSymbolFill :"#779ABF",

_titleKey :"printButtonTitle",

onclick : function() {

this.print()

}

十二、關于highcharts的幾個事件的彙總

1、addSeries

作用：主要适用于監聽圖表再添加series之前。如果方法傳回true，則執行addSeries()方法，否則添加失效。

chart: {
            renderTo: 'container',
            events: {
                addSeries: function() {
                    return confirm("您确定要添加series嗎？");
                }
            }        
        },

2、click(event)

作用：用于監聽圖表的點選事件，參數傳遞為事件對象。可以通過event擷取到點選點的x和y值。

chart: {
            renderTo: 'container',
            events: {
                click: function(event) {
                    alert ('x: '+ event.xAxis[0].value +', y: '+
                          event.yAxis[0].value);
                }
            }        
        },

3、load(event)

作用：圖表加載的時候，可以監聽的事件。

chart: {
            renderTo: 'container',
            events: {
                load: function(event) {
                    alert ('圖表将要加載');
                }
            }        
        },

4、redraw

作用：圖表重畫的時候，可以監聽此事件。

chart: {
            renderTo: 'container',
            events: {
                redraw: function() {
                    alert ('圖示将會重畫');
                }
            }        
        },

5、selection(event)

作用：适用于監聽圖表被選中某個區域的事件，這個事件是否有效需要取決于chart的zoomType屬性是否有設定。zoomType:y 或者zoomType:x。

chart: {
            renderTo: 'container',
            events: {
                selection: function(event) {
                    if (event.xAxis) {
                      alert('區域選中的極值情況：min: '+ event.xAxis[0].min +', max: '+ event.xAxis[0].max);
                    } else {
                        alert("還原圖表放大倍數!");
                    }
                }
            },
            zoomType: 'x'
        },

eg:柱狀圖

//擷取各年營運情況的資料
        function GetOperatioSituByYearData() {
            $.ajax({
                type: "POST",     //要用post方式     
                url: "../Ajax/WebServiceHandler.aspx/GetOperatioSituByYear",
                contentType: "application/json",
                data: {},
                dataType: "json",
                success: function (data) {
                    var dataLength = data.d.length;
                    var colors = ["#4572A7", "#AA4643", "#89A54E", "#80699B", "#3D96AE", "#DB843D", "#92A8CD", "#A47D7C", "#B5CA92"];
                    var dataCategories = [];
                    var dataSeries = [];
                    for (var i = 0; i < dataLength; i++) {
                        dataCategories.push(data.d[i]["StatYear"]);
                        dataSeries.push({ y: data.d[i]["StatCheckTicket"], color: colors[i] });
                    }
                    GetOperatioSituByYear(dataSeries)
                },
                error: function (err) {
                    alert("擷取各年營運資料出錯！");
                }
            });
        }

        //獲得各年營運情況
        function GetOperatioSituByYear(chartData) {
            $('#OperatioSituByYear').highcharts({
                chart: {
                    type: 'column',
                    margin: 75,
                    options3d: { //3d的柱狀圖
                        enabled: true,
                        alpha: 10,
                        beta: 25,
                        depth: 70
                    }
                },
                title: {
                    text: '各年營運情況'
                },
                subtitle: {
                    text: ''
                },
                legend: { //不顯示圖例
                    enabled: false
                },
                plotOptions: {
                    column: {
                        depth: 25
                    }
                },
                xAxis: {
                    categories: ['2010', '2011', '2012', '2013']
                },
                yAxis: {
                    opposite: true,
                    title: {
                        text: '萬元'
                    }
                },
                series: [{
                    name: '各年營運',
                    data: chartData
                }]
            }); 
        } //GetOperatioSituByYear End

highcharts使用總結

繼續閱讀

圖表生成及下拉框美化插件使用總結

Highcharts中文API

去除highcharts中的動畫效果

将highcharts圖表導出為圖檔或pdf文檔

圖表插件Highcharts使用本地action、servlet導出圖檔

使用HIGHCHARTS繪制服務端傳回資料曲線圖

highcharts導出圖檔到Excel和Pdf檔案中

如何在vue項目中使用Highmaps(vue+Highmaps)

highstock K線圖深入研究

HighChart擴充-動态擷取資料

試手百度地圖API 和練習的Highcharts

可視化圖表庫：絕代雙驕，echarts和highcharts的對比

Highcharts+Ajax+Json+Sturts2實作的圖形異步實時重新整理的一個簡單demo

Highcharts給y軸标題添加點選事件通過圖表渲染完畢後的回調函數添加Y軸标題的點選事件。

highcharts點選事件擷取點選點的值

NEV與其他圖表引擎的橫向對比NEV與其他圖表引擎的橫向對比圖表類型移動端定制版支援