一、引入highcharts的model
package com.duowan.gas.common.model; import java.util.ArrayList; import java.util.LinkedHashMap; import java.util.List; import java.util.Map; public class HighCharts { // 图表在页面上显示的宽度 private int width; // 图表在页面上显示的高度 private int height; // 图表名称 private String title; // 横坐标名称 private String xTitle; // 纵坐标名称 private String yTitle; // 图表类型(分为七种) private String chartType; // x轴字段 private String x; // y轴字段 <字段名,图注> private LinkedHashMap<String,String> yFieldMap; // List<bean> 数据集 private List<? extends Object> dataList; public static class Ser { private String y; private String title; public Ser(String y, String title) { this.y = y; this.title = title; } public String getY() { return y; } public void setY(String y) { this.y = y; } public String getTitle() { return title; } public void setTitle(String title) { this.title = title; } } // 把yFieldMap转化成数组形式 public Object[] getSers() { List<Ser> sers = new ArrayList<Ser>(); for(Map.Entry<String, String> entry : yFieldMap.entrySet()){ Ser ser = new Ser(entry.getKey(), entry.getValue()); sers.add(ser); } return sers.toArray(); } // 图表类型 public static enum ChartType { LINE("line", "折线图"), COLUMN("column", "纵向条形图"), BAR("bar", "横向条形图"), PIE("pie", "饼形图"), SCATTER("scatter", "散播点图 "), AREA("area", "区域折线图 "), AREASPLINE("areaspline", "区域曲线图"); private String value; private String desc; private ChartType(String value, String desc) { this.value = value; this.desc = desc; } public String getValue() { return value; } public void setValue(String value) { this.value = value; } public String getDesc() { return desc; } public void setDesc(String desc) { this.desc = desc; } } public LinkedHashMap<String, String> getyFieldMap() { return yFieldMap; } public void setyFieldMap(LinkedHashMap<String, String> yFieldMap) { this.yFieldMap = yFieldMap; } public String getX() { return x; } public void setX(String x) { this.x = x; } public List<? extends Object> getDataList() { return dataList; } public void setDataList(List<? extends Object> dataList) { this.dataList = dataList; } public int getWidth() { return width; } public void setWidth(int width) { this.width = width; } public int getHeight() { return height; } public void setHeight(int height) { this.height = height; } public String getTitle() { return title; } public void setTitle(String title) { this.title = title; } public String getxTitle() { return xTitle; } public void setxTitle(String xTitle) { this.xTitle = xTitle; } public String getyTitle() { return yTitle; } public void setyTitle(String yTitle) { this.yTitle = yTitle; } public String getChartType() { return chartType; } public void setChartType(String chartType) { this.chartType = chartType; } }
二、引入highcharts js文件 (见附件)
三、前台展示
主要调用方法:highchartsUtil.chart(div的ID,后台传回的json数据);
<div id="container"></div> <script src="/js/highcharts/jquery.min.js"></script> <script src="/js/highcharts/highcharts.js"></script> <script src="/js/highcharts/modules/exporting.js"></script> <script src="/js/highcharts/highchartsUtil.js"></script> <script type="text/javascript"> $(function () { highchartsUtil.chart("container",${jsonStr}); }); </script>
四、后台数据处理
假设有一个TestBean,有字段如下: private String date; private double value; private double value2;
// 取得的List<bean>数据集 List<TestBean> listBeans = xxx; // 可选属性 HighCharts highCharts = new HighCharts(); highCharts.setTitle("title"); highCharts.setWidth(900); highCharts.setHeight(500); highCharts.setxTitle("xTitle"); highCharts.setyTitle("yTitle"); // 必填属性 highCharts.setChartType(HighCharts.ChartType.LINE.getValue()); //不同图表只需要修改这里 highCharts.setX("date"); // 指定x轴字段 LinkedHashMap<String,String> yFieldMap = new LinkedHashMap<String,String>(); // y轴的map<y轴的字段,y轴的图注>,多条线只需要多put值 yFieldMap.put("value", "图注一"); yFieldMap.put("value2", "图注二"); highCharts.setyFieldMap(yFieldMap); highCharts.setDataList(listBeans); ObjectMapper objectMapper = new ObjectMapper(); String jsonStr = objectMapper.writeValueAsString(highCharts); model.put("jsonStr", jsonStr); return "index";
相关推荐
highcharts 半封装工具类 测试用待完善 Highcharts 是一个用纯JavaScript编写的一个图表库。 Highcharts 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表 Highcharts 免费提供给个人学习、个人网站和非...
highchart,chart,highcharts,c#,javascript,图表
使用highcharts组建,对各种图形做的封装处理,将页面和后台数据分开处理
AAChartKit基于前端图表库Highcharts封装的一组图表绘制控件
基于highcharts封装了一个简单易用的报表统计,一个json7种不同报表供你选择
博文《关于highcharts的封装和刷新》中代码.
实在没法发到博客里了,太长了。提供给大家下载。封装类里有两个方法。
1111111JavaScript封装的highcharts的例子、一定要下的例子
实在没法发到博客里了,太长了。提供给大家下载。封装类里有两个方法。
外国人封装的HighCharts.dll
读完我博客的可以在这里下载封装js文件,实在太多,没法发到博客中。
绝对能用。一般人都能看懂。直接调用方法即可。不用谢js
一个简单,快速的Vue 3组件,用于呈现使用composition API编写的Highcharts.js图表。 演示 最低要求 Vue@3.0.0 Highcharts@8.0.0(较旧的版本可能有效,但未经测试) Vue和Highcharts未与模块捆绑在一起,...
用javascript封装好的一些js文件,直接可以使用,生成的图表很专业,有柱状图,饼图
Jquery是封装了javascript的一个轻量的级函数库,query报表插件给客户端看去一种美观动态的感觉。
jquery_highchartsjsCPU动态走势图
新手根据 DotNet Highcharts 改写 版本较老,建议参考用
YcHighCharts Highcharts是一个制作图表的纯Javascript类库,自主封装.net图表框架,支持webform和mvc3以上 由元创商业科技(深圳)提供 官网: blog:
使用volt-highcharts组件的示例应用程序可在以下位置找到: 和 伏特::高图 封装了Highcharts javascript图表工具的Volt组件。 Highcharts可免费用于非商业用途。