highcharts使用

最近一个多月都在用highcart 做统计分析及展示，做个总结。本文主要写写自己的一些过程：

highchart VS echarts
DEMO
万能方法
相关点

highcharts VS echarts

稳定性
兼容性
官方DEMO
API
美观程度
特性

在选图表用哪个框架的时候，最终在这两个之间决定的。稳定性和兼容性以及API，DEMO 两者都很完备的。但我在highcharts 官网看了不到半天就做成了demo。可想highcharts 多么容易上手。
之后考虑美观程度，个人感觉还是highcharts 更胜一筹，看起来更舒服一些。
特性的话，两者绘图highcharts是基于svg技术的，而echarts基于canvas，两者技术基础完全不一样，各有特点。而后者是可以在浏览器实现3D图形的，这种效果highcharts是完全不可能做得到的(我没有实践)。echarts展示: Earth with sun light and universe

基于上，考虑到项目应用并没有涉及3D等效果，且highcharts好看又好上手。采用了highcharts。
扔个链接自行体会。http://www.hcharts.cn/demo/highcharts/ （但官网有时候会403。。）

DEMO

应用到的js,注意highcharts-zh_CN要放在最下边。同时这三个应用的是jQuery v1.8.3 .js

<script type="text/javascript" src="#springUrl('')/js/highcharts/highcharts.js"></script>
<script type="text/javascript" src="#springUrl('')/js/highcharts/exporting.js"></script>
<script type="text/javascript" src="#springUrl('')/js/highcharts/highcharts-zh_CN.js"></script>

页面

<div  id="chart_in_out" >

数据准备：

function findInAndOut() {
    try {
        $.ajax({
            url: "new/chartInAndOut?num=" + queryCount,
            type: "post",
            timeout: 2000,
            async: true,
            cache: false,
            success: function (result) {
                var ENTRY_IN = new Array(0);
                var TRANSFER_IN = new Array(0);
                var TRANSFER_OUT = new Array(0);
                var DIMISSION_OUT = new Array(0);
                var END_YEAR_MONTH = new Array(0);
                var temleftMonth = leftMonth;
                if (result && result.length > 0) {
                    for (var i = 7; i >= 0; i--) {
                        for (var j = result.length - 1; j >= 0; j--) {
                            if (result[j].END_YEAR_MONTH) {

                                if (result[j].END_YEAR_MONTH.toString().substring(5, 7) == temleftMonth) {
                                    ENTRY_IN.push(Number(result[j].ENTRY_IN));
                                    TRANSFER_IN.push(Number(result[j].TRANSFER_IN));
                                    TRANSFER_OUT.push(Number(result[j].TRANSFER_OUT));
                                    DIMISSION_OUT.push(Number(result[j].DIMISSION_OUT));
                                    END_YEAR_MONTH.push(result[j].END_YEAR_MONTH.toString().substring(5, 7) + "月");
                                    break;
                                }
                            }
                        }
                       ...
                    }
                }  
                }
                var series = new Array(0);
                series.push({
                    name: '入职',
                    data: ENTRY_IN,
                    stack: 'in',
                    color: c5color,
                    maxPointWidth: maxWidth
                });
                series.push({
                    name: '转入',
                    data: TRANSFER_IN,
                    stack: 'in',
                    color: c6color,
                    maxPointWidth: maxWidth
                });
                series.push({
                    name: '转出',
                    data: TRANSFER_OUT,
                    stack: 'out',
                    color: c7color,
                    maxPointWidth: maxWidth
                });
                series.push({
                    name: '离职',
                    data: DIMISSION_OUT,
                    stack: 'out',
                    color: c8color,
                    maxPointWidth: maxWidth
                });
                drowcolumnsymple(chart_in_out, "入离调转(人)", "", END_YEAR_MONTH, series, '人');
                $(".highcharts-credits").hide();//注释显示的highchart

            }
        });
    } catch (e) {

    }
}

显示方法：(需要哪个特性直接从API/DEMO中拿过来)

function drowcolumnsymple(chartID, title, yAxisTitle, xCategories, Data1, unit) {
    var series = Data1;
    try {
        var options = {
            chart: {
                renderTo: chartID,
                type: 'column'
            },
            title: {
                text: title,
                align: titleAlign,
                style: {
                    fontSize: titleSize
                }
            },
            xAxis: {
                categories: xCategories,
                title: {
                    text: null
                }
            },
            yAxis: {
                allowDecimals: false,
                min: 0,
                title: {
                    text: yAxisTitle,
                    align: titleAlign
                }
            },

            tooltip: {
                formatter: function () {
                    return '<b>' + this.x + '</b><br/>' +
                        this.series.name + ': ' + this.y + unit;
                }
            } ,
            plotOptions: {
                column: {
                    stacking: 'normal'
                }
            },
            series: series
        };
        var chart = new Highcharts.Chart(options);
    }
    catch (e) {
    }
}

这里写图片描述

保守的说drowcolumnsymple的这个方法基本也是万能的了。

此外，对颜色的支持方式也是非常好。
colors = Highcharts.getOptions().colors;
colors2 =Highcharts.Color(colors[0]).brighten(i / 30).get()；
colors3=”rgb(108,123,246)”;
colors4=”#FFFAEF”

友情提示：
数组需要数值类型。可能需要强转。

highcharts VS echarts

DEMO

猜你喜欢