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;}//然后在生成图片的时候加载数据就调用定义好的这个functionseries: [{            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)

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