HightChart简单教程

HightChart简单教程

HightCharts是一个基于纯javascript的数据图形化组件，当然如果用于企业用途需要购买授权，个人使用则免费，个人觉得HightCharts是目前我用过的效果比较炫的图形化种类较多的一种组件。我就将我个人 使用的情况做一个简单的教程。
首先从HighCharts官网https://www.hcharts.cn/ 下载最新的版本

应用环境
Hightcharts 5.0.14 + jQuery 1.8.3以上 + spring-boot

基于静态数据的图

首先我们生成基于静态数据的图
在页面引入相应的js文件

<script src="assets/js/libs/jQuery-1.8.3.min.js"></script>
<script src="assets/js/libs/highcharts/highcharts.js"></script>
<script src="assets/js/libs/highcharts/exporting.js"></script>
<script src="assets/js/libs/highcharts/highcharts-zh_CN.js"></script>

注意要先引入jquery的包再引入hightcharts的包不然可能会出错
随后在html页面添加以下内容

<div id="container" style="min-width:400px;height:400px"></div>

    <script>
    $(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: '月平均降雨量'//图标题
        },
        subtitle: {
            text: '数据来源: WorldClimate.com'//图的子标题
        },
        xAxis: {
            categories: [
                '一月',
                '二月',
                '三月',
                '四月',
                '五月',
                '六月',
                '七月',
                '八月',
                '九月',
                '十月',
                '十一月',
                '十二月'
            ],//x轴的坐标
            crosshair: true//当鼠标选中某个柱的时候是否有遮罩
        },
        yAxis: {//定义y轴
            min: 0,//y轴最小值为0
            title: {
                text: '降雨量 (mm)'//y轴名称
            }
        },
        tooltip: {//定义一个弹出框当鼠标指向某个坐标柱时弹出，弹出框为一个表格
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',//point.key指的x坐标轴的值
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +//其中某一个y轴项的名称与后面的y轴值对应
            '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',//默认显示的值为y轴的值:.1f表示为保留一位小数点的浮点数
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
            exporting: {//默认不带有导出功能
                enabled: false
            },
            credits: {//默认不显示highcharts的标志
                enabled: false
            },
        series: [{//图形化的数据
            name: '东京',
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }, {
            name: '纽约',
            data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
        }, {
            name: '伦敦',
            data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
        }, {
            name: '柏林',
            data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
        }]
    });
});
</script>

这样就能生成一个基础的柱状图，这是一个柱状图，下面我们来看一个饼状图

<div id="container" style="min-width:400px;height:400px"></div>

    <script>
    $(function () {
    $('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: '2014 某网站各浏览器浏览量占比'
        },
        tooltip: {
            headerFormat: '{series.name}<br>',
            pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        },
        series: [{
            type: 'pie',
            name: '浏览器访问量占比',
            data: [
                ['Firefox',   45.0],
                ['IE',       26.8],
                {
                    name: 'Chrome',
                    y: 12.8,
                    sliced: true,
                    selected: true
                },
                ['Safari',    8.5],
                ['Opera',     6.2],
                ['其他',   0.7]
            ]
        }]
    });
});
</script>

这是一个饼状图具体的参数配置类似，更多详细的简单实例可以参考下载的官方包中的demo

基于Ajax的图形化

利用ajax动态获取数据并生成相应的图也不是一件特别困难的事情，需要注意的就是按照不同的图类型组装特定的数据。

饼图的数据结构
                [
                    ['1月', 25.0],
                    ['2月', 26.8],
                    {
                        name: '3月',
                        y: 22.8,
                        sliced: true,
                        selected: true
                    },
                    ['4月', 24.6]
                ]
//因此我们需要按照这个格式生成数据

//我们先定义一个function
//院系学生百分比
function getYxxsChartData() {
    //图形数据
    var chartData = new Array();
    $.ajax({
        type: "POST",
        url: "scuvc/jw/xs/chart/yxxs",
        async: false,
        success: function (result) {//返回数据根据结果进行相应的处理
            if (result) {
                var total = 0;
                $(result).each(function (i, val) {
                    total += val[1];
                });
                //var data1 = {label:  result[0][0] , data: result[0][1], color: colours.red};
                chartData.push([result[0][0], (result[0][1] / total).toFixed(4) * 100]);
                chartData.push([result[1][0], (result[1][1] / total).toFixed(4) * 100]);
                chartData.push([result[2][0], (result[2][1] / total).toFixed(4) * 100]);
                chartData.push([result[3][0], (result[3][1] / total).toFixed(4) * 100]);
                chartData.push([result[4][0], (result[4][1] / total).toFixed(4) * 100]);
                chartData.push([result[5][0], (result[5][1] / total).toFixed(4) * 100]);
            }
        }
    });
    return chartData;
}
//然后在生成图片的时候加载数据就调用定义好的这个function
series: [{
            type: 'pie',
            name: '百分比',
            data: getYxxsChartData()
        }]

//柱状图的数据结构
series: [{
            name: '东京',
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }, {
            name: '纽约',
            data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
        }, {
            name: '伦敦',
            data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
        }, {
            name: '柏林',
            data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
        }]
//因为数据结构的方式不同我们又需要采用其他的数据构造方式
//同样的我们需要定义一个function，按照特定的数据结构生成所需要的数据
function getXwxlChartData(i) {
    //图形数据
    var chartData = new Array();
    $.ajax({
        type: "POST",
        url: "scuvc/zl/jzg/chart/xwxl",
        async: false,
        success: function (result) {//返回数据根据结果进行相应的处理
            if (i == 0) {
                var total = 0;
                $(result).each(function (i, val) {
                    total += val[1];
                });
                $(result).each(function (i, val) {
                    chartData.push([val[0], (val[1] / total).toFixed(4) * 100]);
                });
            } else {
                $(result).each(function (i, val) {
                    chartData.push({name: val[0], y: val[1], drilldown: val[0]})
                });
            }
        }
    });
    return chartData;
}
//最后在生成图的时候进行调用
series: getXwxlChartData(1)

由于我目前只用到了这两类图，所以先简单介绍这么多，后面如果有新图形化的使用我会继续完善上来