HighCharts的使用

HighCharts系列软件简介

1. Highcharts

Highcharts 是一个用纯 JavaScript 编写的一个图表库， 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。Highcharts 支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表，其中很多图表可以集成在同一个图形中形成混合图。

2. Highstock

Highstock 是用纯 JavaScript 编写的股票图表控件，可以开发股票走势或大数据量的时间轴图表。它包含多个高级导航组件：预设置数据时间范围，日期选择器、滚动条、平移、缩放功能。

3. Highmaps

Highmaps 是一款基于 HTML5 的优秀地图组件。Highmaps 继承了 Highcharts 简单易用的特性，利用它可以方便快捷的创建用于展现销售、选举结果等其他与地理位置关系密切的交互性地图图表。Highmaps 可以单独使用，也可以作为 Highcharts 的一个组件来使用。

HighCharts优点

Highcharts使用的一些优点的介绍。
  1、首先、使用Highcharts能快速、简单的做出各种诸如柱状图、饼状图、曲线图等多种形式的统计图或者走势图。使用者只需要提供对应的数据、以及简单的Highcharts的配置即可。使用简单。
  2、跨语言跨平台支持多种浏览器。Highcharts是基于js制作出来的。是一个js类库。无论你使用什么后端语言，都可以很方便的使用Highcharts来做图表或者统计。
  3、使用门槛极低、稍微看一下API都可以做出各种符合要求的统计图表等。数据灵活。支持xml 和json。

HighCharts使用

下载插件

    若要用HighCharts的话，得先引用它的插件，插件不大，核心文件只有一个highcharts.js文件，可以去HighCharts官网上去下载：http://www.highcharts.com/download下载完成之后，就把js文件引用到项目中

JavaScript

<!--highcharts核心文件-->
<script type="text/javascript" src=" 
<!--导出需要引用的文件-->
<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/exporting.js"></script>

Demo

本文以混合的Y轴折线图为例

后台部分代码如下：

Java

List<Map<String, String>> list = saleService.getSaleAndBuyer();
StringBuffer dateArray = new StringBuffer();
StringBuffer saleArray = new StringBuffer();
StringBuffer buyerArray = new StringBuffer();
dateArray.append("[");
saleArray.append("[");
buyerArray.append("[");
for (int i=0;i<list.size();i++) {
    dateArray.append(list.get(i).get("date"));
    //数据格式的转换
    saleArray.append(String.valueOf(list.get(i).get("salePrice")));
    buyerArray.append(String.valueOf(list.get(i).get("buyerCount")));
    if (i < list.size()-1) {
        dateArray.append(",");
        saleArray.append(",");
        buyerArray.append(",");
    }
}
dateArray.append("]");
saleArray.append("]");
buyerArray.append("]");
request.setAttribute("dateArray", dateArray);
request.setAttribute("saleArray", saleArray);
request.setAttribute("buyerArray", buyerArray);
logger.warn("登录成功");
return "/stock/success";

前台部分代码如下：

JavaScript

<script>
    var dateList = "${dateArray}".replace("[", "").replace("]", "").split(",");
    var salePrice = "${saleArray}".replace("[", "").replace("]", "").split(",");
    var buyerCount = "${buyerArray}".replace("[", "").replace("]", "").split(",");
    for (var i = 0; i < buyerCount.length; i++) {
        buyerCount[i] = parseInt(buyerCount[i])
    };
    for (var i = 0; i < salePrice.length; i++) {
        salePrice[i] = parseFloat(salePrice[i])
    };
    var chart = {
        zoomType: 'xy'
    };
    var subtitle = {
        text: '数据来源：www.xxxxxxx.xyz'
    };
    var title = {
        text: '销售数据图'
    };
    var xAxis = {
        categories: dateList,
        crosshair: true
    };
    var yAxis = [{ // 第一条Y轴
        labels: {
            format: '{value}人',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        },
        title: {
            text: '单日客户量',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        }
    }, { // 第二条Y轴
        title: {
            text: '单日销售额',
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        },
        labels: {
            format: '￥{value}',
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        },
        opposite: true
    }];
    var tooltip = {
        shared: true
    };
    var legend = {
        layout: 'vertical',
        align: 'right',
        x: 0,
        verticalAlign: 'top',
        y: 0,
        floating: true,
        backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
    };
    var series = [{
        name: '单日销售额',
        type: 'column',
        yAxis: 1,
        data: salePrice,
        tooltip: {
            valueSuffix: '元'
        }

    }, {
        name: '单日客户量',
        data: buyerCount,
        tooltip: {
            valueSuffix: '人'
        }
    }
    ];
    var json = {};
    json.chart = chart;
    json.title = title;
    json.subtitle = subtitle;
    json.xAxis = xAxis;
    json.yAxis = yAxis;
    json.tooltip = tooltip;
    json.legend = legend;
    json.series = series;
    $('#container').highcharts(json);
</script>

结果如下：

附：

• Highcharts官网：http://www.highcharts.com

• Highcharts官网Demo：http://www.highcharts.com/demo

• Highcharts官网文档：http://www.highcharts.com/docs

• Highcharts官网API：http://api.highcharts.com/highcharts