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轴折线图为例

后台部分代码如下：

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";

前台部分代码如下：

<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

转载于:https://www.cnblogs.com/PreachChen/p/8779728.html