highCharts使用记录

 

 

公司的架构师让我做一个mockup,要用到highCharts,,以前想接触的,没时间学习,也没有用过,正好工作可以用上了,可以边学边做了。

 

环境

<script src="./js/jquery-1.8.3.min.js"></script>
<script src="./js/highcharts.js"></script>

highCharts可以基于jQuery、MooTools 、Prototype 、Highcharts Standalone Framework中的一个,不知道是否支持Zepto。

 

Hello,World!

引用下highcharts中文网上的例子

 

HTML

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" src="./css/common.css" />
    </head>
    <body>
        <div id="container" style="min-width:800px;height:400px"></div>
        
        
        
        
        <script src="./js/jquery-1.8.3.min.js"></script>
        <script src="./js/highcharts/highcharts.js"></script>
        <script src="./js/common.js"></script>
    </body>
</html>

common.js

$(function () { 
    $('#container').highcharts({                   //图表展示容器,与div的id保持一致
        chart: {
            type: 'column'                         //指定图表的类型,默认是折线图(line)
        },
        title: {
            text: 'My first Highcharts chart'      //指定图表标题
        },
        xAxis: {
            categories: ['my', 'first', 'chart']   //指定x轴分组
        },
        yAxis: {
            title: {
                text: 'something'                  //指定y轴的标题
            }
        },
        series: [{                                 //指定数据列
            name: 'Jane',                          //数据列名
            data: [1, 0, 4]                        //数据
        }, {
            name: 'John',
            data: [5, 7, 3]
        }]
    });
});

 效果

highCharts使用记录_第1张图片

 

可以看到上面的highcharts()方法中包含了一个json,json里面有chart、title、xAxis、yAxis、series几个key,这些参数和图标本身的构造有关系。

 

 

Highcharts的构造

通常情况下,Highcharts包含标题(Title)、坐标轴(Axis)、数据列(Series)、数据提示框(Tooltip)、图例(Legend)、版权信息(Credits)等,高级的还包括导出功能按钮(Exporting)、标示线(PlotLines)、标示区域(PlotBands)等。

highCharts使用记录_第2张图片

 

 

图表分类

也叫数据列类型,可以写在chart:{}中,也可以写在series:{}中,常用到后者。

支持的类型有:area, areaspline, bar, column, line, pie, scatter, spline

上述的highcharts()方法的json参数中有一句

chart: {
    type: 'column'
}

图表默认是line(折线图),我们在这里设置成了column(柱状图)

 

容器绑定

图表需要容器绑定,我们上面直接用jQuery选择器调用highcharts()方法完成了容器绑定

$("#container").highcharts({
    // Highcharts 配置  
}); 

还有一种面向对象的方法,通过renderTo来指定容器

var charts = new Highcharts.Chart({
    // Highcharts 配置
    chart : {
        renderTo : "container"  // 注意这里一定是 ID 选择器
    }
}); 

 

事件绑定

click:点击触发的方法

$(function () {
    // create the chart
    $('#container').highcharts({
        chart: {
            events: {
                click: function (event) {
                    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]
        }]
    });
});

 

load:加载完成后回调的方法

$(function () {
    // create the chart
    $('#container').highcharts({
        chart: {
            events: {
                load: function () {
                    var label = this.renderer.label('Chart loaded', 100, 120)
                        .attr({
                            fill: Highcharts.getOptions().colors[0],
                            padding: 10,
                            r: 5,
                            zIndex: 8
                        })
                        .css({
                            color: '#FFFFFF'
                        })
                        .add();

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

        series: [{
            animation: false,
            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]
        }]
    });
});

 

addSeries:添加数据的方法

HTML

<div id="container" style="min-width:400px;height:400px;"></div>
<button id="button" class="autocompare">Add series</button>

JS

$(function () {
    // create the chart
    $('#container').highcharts({
        chart: {
            events: {
                addSeries: function () {
                    var label = this.renderer.label('A series was added, about to redraw chart', 100, 120)
                        .attr({
                            fill: Highcharts.getOptions().colors[0],
                            padding: 10,
                            r: 5,
                            zIndex: 8
                        })
                        .css({
                            color: '#FFFFFF'
                        })
                        .add();

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

        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        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]
        }]
    });


    // activate the button
    $('#button').click(function () {
        var chart = $('#container').highcharts();

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

        $(this).attr('disabled', true);
    });
});

 

 

redraw:重绘时触发的方法(比如添加了数据会触发重绘事件)

HTML

<div id="container" style="min-width:400px;height:400px"></div>
</div><button id="button" class="autocompare">Add series</button>

JS

$(function () {
    // create the chart
    $('#container').highcharts({
        chart: {
            events: {
                redraw: function () {
                    var label = this.renderer.label('The chart was just redrawn', 100, 120)
                        .attr({
                            fill: Highcharts.getOptions().colors[0],
                            padding: 10,
                            r: 5,
                            zIndex: 8
                        })
                        .css({
                            color: '#FFFFFF'
                        })
                        .add();

                    setTimeout(function () {
                        label.fadeOut();
                    }, 1000);
                }
            }
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        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]
        }]
    });


    // activate the button
    $('#button').click(function () {
        var chart = $('#container').highcharts();
        chart.addSeries({
            data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5]
        });

        $('#button').unbind('click');
    });
});

 

 

范围选择事件:在选取了一定范围后触发的事件(常用来放大Zoom以供详细查看图标)

$(function () {

    // create the chart
    $('#container').highcharts({
        chart: {
            events: {
                selection: function (event) {
                    var text,
                        label;
                    if (event.xAxis) {
                        text = 'min: ' + Highcharts.numberFormat(event.xAxis[0].min, 2) + ', max: ' + Highcharts.numberFormat(event.xAxis[0].max, 2);
                    } else {
                        text = 'Selection reset';
                    }
                    label = this.renderer.label(text, 100, 120)
                        .attr({
                            fill: Highcharts.getOptions().colors[0],
                            padding: 10,
                            r: 5,
                            zIndex: 8
                        })
                        .css({
                            color: '#FFFFFF'
                        })
                        .add();

                    setTimeout(function () {
                        label.fadeOut();
                    }, 1000);
                }
            },
            zoomType: 'x'
        },
        title: {
            text: 'Chart selection demo'
        },
        subtitle: {
            text: 'Click and drag the plot area to draw a selection'
        },

        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()
        }]
    });
});

 

除此之外还有drillDown和drillUp(上钻事件和下钻事件)两个事件,点击后可以查看更加明细的数据图标。

 

属性参数

 

Chart:图表区选项

highCharts使用记录_第3张图片

 

Color:颜色选项

Highcharts已经默认提供了多种颜色方案,当要显示的图形多于颜色种类时,多出的图形会自动从第一种颜色方案开始选取。自定义颜色方案的方法:

Highcharts.setOptions({ 
    colors:['#058DC7','#50B432','#ED561B','#DDDF00','#24CBE5','#64E572','#FF9655', '#FFF263', '#6AF9C4'] 
}); 

 

Title & subTitle:标题和子标题选项

highCharts使用记录_第4张图片

 

xAxis & yAxis:X轴和Y轴选项

highCharts使用记录_第5张图片

 

Series:数据列选项

highCharts使用记录_第6张图片

 

plotOptions:数据列选项

highCharts使用记录_第7张图片

 

Tooltip:数据点提示框选项

highCharts使用记录_第8张图片

 

Legend:图例选项

highCharts使用记录_第9张图片

 

 

 

 

 

 

 

 

API地址:http://www.hcharts.cn/api/index.php 

参考文章:http://www.hcharts.cn/docs/index.php?doc=basic

你可能感兴趣的:(highCharts使用记录)