HighChars 学习手册

前几天需要制作一些图表，于是想到去年用过HighChars，就想着反正好久没写过图表了，于是就把活给揽过来了(被硬塞进来的)；顺带复习一下HighChars吧！当然，都是官方文档上看到的

• HighChars图表由九个部分组成

  
  
  Highcharts基本组成部分

1. 标题（Title）
2. 坐标轴（Axis）
3. 数据列（Series）
4. 数据提示框（Tooltip）
5. 图例（Legend）
6. 版权标签（Credits）
7. 导出功能（Exporting）
8. 标示线（PlotLines）
9. 标示区（PlotBands）

• 图表类型通过 chart.type 来指定图表类型，表示如果默认图表类型，即如果 series 中没有指定 type， 那么图表的类型就由该属性来确定。
• HighChars使用最主要的是图表配置选项：

var options = {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Fruit Consumption'
    },
    xAxis: {
        categories: ['Apples', 'Bananas', 'Oranges']
    },
    yAxis: {
        title: {
            text: 'Fruit eaten'
        }
    },
    series: [{
        name: 'Jane',
        data: [1, 0, 4]
    }, {
        name: 'John',
        data: [5, 7, 3]
    }]
};

数据列共有三个级别的配置，权重从低到高依次如下：

• 配置在 plotOptions.series 中

对应的 API 为：plotOptions.series 中，针对所有类型图表有效，一般是通用配置。

• 配置在 plotOptions.{图表类型} 中

对应的 API 为 ： plotOptions 下的指定图表类型，针对当前类型图表有效，一般是某一种图表的通用配置。

• 配置在 series 中

对应的 API 为：series， 针对当前数据列有效

以上三中方式自上往下权重依次递增的，也就是配置在 series 中的属性会覆盖 plotOptions 中的配置。 Highcharts API 的这种层级关系体现了 API 设计的继承性和灵活性。

series：数据列；格式是json对象；
配置好图表配置，一个简单的报表就出来了；
显示报表后需要点击某一个栏会出现下一个报表或者运行一个函数；

下一个报表的话HighChars提供了一个钻取功能：drilldown ；

$(function () {
        // Create the chart
        $('#container').highcharts({
                chart: {
                        type: 'column',
                        events: {
                                drillup: function(e) {
                                        // 上钻回调事件
                                        console.log(e.seriesOptions);
                                },
                                drilldown: function (e) {
                                        if (!e.seriesOptions) {
                                                var chart = this,
                                                        drilldowns = {
                                                                'Animals': {
                                                                        name: 'Animals',
                                                                        data: [
                                                                                ['Cows', 2],
                                                                                ['Sheep', 3]
                                                                        ]
                                                                }
                                                        },
                                                        series = drilldowns[e.point.name];
                                                // Show the loading label
                                                chart.showLoading('Simulating Ajax ...');
                                                setTimeout(function () {
                                                        chart.hideLoading();
                                                        chart.addSeriesAsDrilldown(e.point, series);
                                                }, 1000);
                                        }
                                }
                        }
                },
                series: [{
                        name: 'Things',
                        colorByPoint: true,
                        data: [{
                                name: 'Animals',
                                y: 5,
                                drilldown: true
                        }]
                }]
        });
});

运行函数的话：events ;当数据列被点击时触发的事件回调函数，其中事件对象作为函数的参数传递

Highcharts.chart('container', {
        xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        plotOptions: {
                series: {
                        cursor: 'pointer',
                        events: {
                                click: function (event) {
                                        alert(
                                                this.name + ' 被点击了\n' +
                                                '最近点：' + event.point.category + '\n' +  
                                                'Alt 键: ' + event.altKey + '\n' +
                                                'Ctrl 键: ' + event.ctrlKey + '\n' +
                                                'Meta 键（win 键）： ' + event.metaKey + '\n' +
                                                'Shift 键：' + event.shiftKey
                                        );
                                }
                        }
                }
        },
        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]
        }]
});

highchars 参数配置