highcharts key point

 

highcharts中文教程
http://www.hcharts.cn/docs/index.php?doc=basic-chart

事件（在chart这个object里设置）
例子1（click）:

    // create the chart
    $('#container').highcharts({
        chart: {
            events: {
                click: function (event) {
                    //this.renderer.label().add()
                    var label = this.renderer.label(
                            'x: ' + Highcharts.numberFormat(event.xAxis[0].value, 2) + ', y: ' + Highcharts.numberFormat(event.yAxis[0].value, 2),
                            event.xAxis[0].axis.toPixels(event.xAxis[0].value),
                            event.yAxis[0].axis.toPixels(event.yAxis[0].value)
                        )
                            .attr({
                                fill: Highcharts.getOptions().colors[0],
                                padding: 10,
                                r: 5,
                                zIndex: 8
                            })
                            .css({
                                color: '#FFFFFF'
                            })
                            .add();

                    setTimeout(function () {
                        label.fadeOut();
                    }, 1000);
                }
            }
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });

例子2（drilldown）:

    $('#container').highcharts({
        chart: {
            type: 'column',
            events: {
                drilldown: function (e) {
                    if (!e.seriesOptions) {
                        //this即是chart本身
                        var chart = this,
                            drilldowns = {
                                'Animals': {
                                    name: 'Animals',
                                    data: [
                                        ['Cows', 2],
                                        ['Sheep', 3]
                                    ]
                                },
                                'Fruits': {
                                    name: 'Fruits',
                                    data: [
                                        ['Apples', 5],
                                        ['Oranges', 7],
                                        ['Bananas', 2]
                                    ]
                                },
                                'Cars': {
                                    name: 'Cars',
                                    data: [
                                        ['Toyota', 1],
                                        ['Volkswagen', 2],
                                        ['Opel', 5]
                                    ]
                                }
                            },
                            /*e.point.name获取点击的那个点的名字
                             *name这个属性是series里定义的
                             */
                            series = drilldowns[e.point.name];

                        // Show the loading label.图标的loading这样加
                        chart.showLoading('Simulating Ajax ...');

                        setTimeout(function () {
                            chart.hideLoading();//隐藏loading提示
                            chart.addSeriesAsDrilldown(e.point, series);
                        }, 1000);
                    }

                }
            }
        },
        title: {
            text: 'Async drilldown'
        },
        xAxis: {
            type: 'category'
        },

        legend: {
            enabled: false
        },

        plotOptions: {
            series: {
                borderWidth: 0,
                //这个datalabel不是tooltip，而是每个点上的标签
                dataLabels: {
                    enabled: true
                }
            }
        },

        series: [{
            name: 'Things',
            colorByPoint: true,
            data: [{
                name: 'Animals',
                y: 5,
                drilldown: true
            }, {
                name: 'Fruits',
                y: 2,
                drilldown: true
            }, {
                name: 'Cars',
                y: 4,
                drilldown: true
            }]
        }],
    });

例子3（图表放大细化）:

 $('#container').highcharts({

        chart: {
            zoomType: 'x'
        },

        title: {
            text: 'Hide overlapping data labels'
        },

        series: [{
            data: (function (arr, len) {
                var i;
                for (i = 0; i < len; i = i + 1) {
                    arr.push(i);
                }
                return arr;
            }([], 50)),
            dataLabels: {
                enabled: true,
                y: -5
            }
        }]

    });

	//button
    $('#setextremes').click(function () {
        $('#container').highcharts().xAxis[0].setExtremes(10, 15);
    });

    $('#unsetextremes').click(function () {
        $('#container').highcharts().xAxis[0].setExtremes();
    });

例子4（两个y轴）:

$(function () {
    $('#container').highcharts({
        chart: {
            marginRight: 80 // like left
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: [{
            lineWidth: 1,
            title: {
                text: 'Primary Axis'
            }
        }, {
            lineWidth: 1,
            opposite: true,
            title: {
                text: 'Secondary Axis'
            }
        }],

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }, {
            type: 'spline',
            data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2],
            yAxis: 1
        }]
    });
});

例子5（tooltip当中this的属性）:

 

$('#container').highcharts({ 
      plotOptions: { 
            line:{
                 events :{ 
                     click:function(){ 
                        alert('x='+event.point.x + ", y=" + event.point.y + ", extra=" + event.point.extra); 
                     } 
                  } 
              } 
       }, 
       tooltip:{
             formatter:function(){ 
                   return '<b>' + this.series.name + '</b>: y=' + this.y + ', extra='+this.point.extra;
             }  
        }, 
       series: [{ data: [ 
           {y:29.7,extra:'hhh'}, 
           {y:71.5,extra:'2333'}, 
           {y:106.4,extra:'1122'}, 
           {y:129.2,extra:'vvvv'} ] }]
});

 

例子6（自定义legend点击事件，隐藏其他只显示点击serie）:

 

plotOptions: {
    series: {
        events: {
            legendItemClick: function(e) {
                var index = this.index;

                var series = this.chart.series;

                if (!series[index].visible) {

                    for (var i = 0; i < series.length; i++) {

                        var s = series[i];

                        i === index ? s.show() : s.hide();
                    }
                }

                return false;
            }
        }
    }
} 

 

---关键点---
知识点1：
定义图的类型可以在chart的object选项里设置，也可以在series这里设置

series: [{
            type: 'column',
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }, {
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4].reverse()
        }]

知识点2：
label是坐标轴上刻度值的显示格式

xAxis: {
            reversed: false,
            title: {
                enabled: true,
                text: 'Altitude'
            },
            [color=blue]labels: {
                formatter: function () {
                    return this.value + 'km';
                }
            },[/color]
            maxPadding: 0.05,
            showLastLabel: true
        }

 知识点3：
colors定义series颜色，数据列调用颜色的方式是第 n 个数据列使用第 n 个颜色数组里的值，当序列的数量超过颜色数组的长度，后续的序列将会从头调用。

 

$('#container').highcharts({
        chart: {
            type: 'pie'
        },
        colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });

 

colorByPoint属性表示是为每一个series匹配一种颜色还是为每一个点匹配一种颜色

plotOptions: {
            column: {
               colorByPoint:true
            }
        }

 

 

 知识点4：

pointStart、pointInterval、tooltip还可以配在series里

 

$(function () {
    $('#container').highcharts({
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: {
                day: '%e of %b'
            }
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            pointStart: Date.UTC(2010, 0, 1),
            pointInterval: 24 * 3600 * 1000, // one day
            tooltip: {
                valueSuffix: ' mm'
           }
        }]
    });
});

 

 

知识点5：

legend的相关处理

legend: {
    layout: 'vertical',
    backgroundColor: '#FFFFFF',
    floating: true,
    align: 'left',
    verticalAlign: 'top',
    x: 90,
    y: 45,
    labelFormatter: function() {
        /*
         * 获取数据列下标，通过下标判断做一系列处理
         * 还可以通过获取数据列名字等来做判断（通过 console.log(this) 来查看数据列详细信息）
         */
        var index = this._i;

        // return null 则可以不显示图例项
        return index === 0 ? null : this.name;
    }
} 

 

知识点6：

公共设置

Highcharts.setOptions({
        // 所有语言文字相关配置都设置在 lang 里
        lang: {
            resetZoom: '重置',
            resetZoomTitle: '重置缩放比例'
        }
    });

 

知识点7：

要对highcharts当中的元素进行操作，如何找到元素？

控制台console查看对象属性：
1.对象的相应函数在对象的__proto__属性里面（主要看这点）
2.通常有animate相关属性
3.通常有jQuery1725832659457895这样的属性（应该是代表真正的元素，因为该属性下有events属性）

 

知识点8：

------------------------------------------

chart:
    event:    click

对应的获取选中的点是通过 chart.getSelectedPoints() 函数来实现的
饼图的白色间隔是linewidth的原因，相同情况产生于area图表

------------------------------------------

$(function () {
    $('#container').highcharts({
        chart: {
            zoomType: 'x'
        },
        xAxis: {
            type: 'datetime',
            maxZoom: 48 * 3600 * 1000		//表示label之间的间隔
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            pointStart: Date.UTC(2010, 0, 1),
            pointInterval: 24 * 3600 * 1000 // one day	，表示取单位一天为每一个取值点	
        }]
    });
});

-------------------

plotOptions: {
    line: {			//针对line图标的公共设置
        dataLabels: {
            enabled: true,
            formatter: function() {
                return this.x + "	" + this.y;
            },
            // format: "{x} 	 {y}"
        }
    }
}