网址:http://www.fusioncharts.com/dev/chart-guide/heat-map-chart/introduction.html

以下只是假数据,目前还没有实现动态数据获取,哪位大神可以帮助我,那便是赶集不尽了。

注:HTML我是嵌套的,所以没有头文件,各位用的时候可以自己加

图表展示

aaarticlea/png;base64,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" alt="" />

第一种方法

后台假数据

StringBuilder stringBuilder = new StringBuilder();
2
3 //标题
4 stringBuilder.append("<chart theme='fint' caption='Top 4 US Cities' subcaption='Average temperature (°F) in seasons (2013-14)' xaxisname='Seasons' yaxisname='Cities' showplotborder='1' mapbycategory='1'>");
5
6 //行
7 stringBuilder.append("<rows>");
8 stringBuilder.append("<row id='NY' label='New York' />");
9 stringBuilder.append("<row id='NY' label='New York' />"
10 +"<row id='LA' label='Los Angeles' />"
11 +"<row id='CH' label='Chicago' />"
12 +"<row id='HO' label='Houston' />");
13 stringBuilder.append("</rows>");
14 //列
15 stringBuilder.append("<columns>");
16 stringBuilder.append("<column id='wI' label='Winter' />"
17 +"<column id='SU' label='Summer' />"
18 +"<column id='SP' label='Spring' />"
19 +"<column id='AU' label='Autumn' />");
20 stringBuilder.append("</columns>");
21 //数据
22 stringBuilder.append("<dataset>");
23 stringBuilder.append("<set rowid='LA' columnid='WI' value='60.10' colorrangelabel='Warm' />"
24 +"<set rowid='LA' columnid='SP' displayvalue='25.3' colorrangelabel='Warm' />"
25 +"<set rowid='LA' columnid='SU' displayvalue='68.2' colorrangelabel='Warm' />"
26 +"<set rowid='LA' columnid='AU' displayvalue='65.7' colorrangelabel='Warm' />"
27 +"<set rowid='NY' columnid='WI' displayvalue='33.7' colorrangelabel='Freezing' />"
28 +"<set rowid='NY' columnid='SP' displayvalue='57.8' colorrangelabel='Warm' />"
29 +"<set rowid='NY' columnid='SU' displayvalue='74.49' colorrangelabel='Hot' />"
30 +"<set rowid='NY' columnid='AU' displayvalue='57.6' colorrangelabel='Warm' />"
31 +"<set rowid='CH' columnid='WI' displayvalue='22.89' colorrangelabel='Freezing' />"
32 +"<set rowid='CH' columnid='SP' displayvalue='55.7' colorrangelabel='Warm' />"
33 +"<set rowid='CH' columnid='SU' displayvalue='72.2' colorrangelabel='Hot' />"
34 +"<set rowid='CH' columnid='AU' displayvalue='51.6' colorrangelabel='Warm' />"
35 +"<set rowid='HO' columnid='WI' displayvalue='53.0' colorrangelabel='Warm' />"
36 +"<set rowid='HO' columnid='SP' displayvalue='72.7' colorrangelabel='Hot' />"
37 +"<set rowid='HO' columnid='SU' displayvalue='83.3' colorrangelabel='Hot' />"
38 +"<set rowid='HO' columnid='AU' displayvalue='53.0' colorrangelabel='Warm' />");
39 stringBuilder.append("</dataset>");
40 stringBuilder.append("<colorrange gradient='0'>");
41 stringBuilder.append("<color code='#6da81e' minvalue='0' maxvalue='50' label='Freezing' />"
42 +"<color code='#f6bc33' minvalue='50' maxvalue='70' label='Warm' />"
43 +"<color code='#e24b1a' minvalue='70' maxvalue='85' label='Hot' />");
44 stringBuilder.append("</colorrange>");
45 stringBuilder.append("</chart>");

HTML里的

<script type="text/javascript" src="${pageContext.request.contextPath}/funsioncharts/fusioncharts1.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/funsioncharts/fusioncharts.theme.fint.js" ></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/funsioncharts/fusioncharts.powercharts.js" ></script> <script type="text/javascript">
$(function(){
$.ajax({
url:"sum/tableList.do",
type:"POST",
dataType:"html",
data:{}, success:function(msg){
if(msg){
var fusioncharts = new FusionCharts({
type: 'heatmap',
renderAt: 'chart-container',
width: '550',
height: '300',
dataFormat: 'xml',
dataSource:msg
});
fusioncharts.render();
}
}
});
});
</script> <div id="chart-container">FusionCharts XT will load here!</div>

第二种方法

HTML==》JSON

 <script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.powercharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script> <script type="text/javascript"> FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'heatmap',
renderAt: 'chart-container',
width: '550',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fint",
"caption": "Top 4 US Cities",
"subcaption": "Average temperature (°F) in seasons (2013-14)",
"xAxisName": "Seasons",
"yAxisName": "Cities",
"showPlotBorder": "1",
"mapByCategory": "1"
},
"rows": {
"row": [{
"id": "NY",
"label": "New York"
}, {
"id": "LA",
"label": "Los Angeles"
}, {
"id": "CH",
"label": "Chicago"
}, {
"id": "HO",
"label": "Houston"
}]
},
"columns": {
"column": [{
"id": "wI",
"label": "Winter"
}, {
"id": "SU",
"label": "Summer"
}, {
"id": "SP",
"label": "Spring"
}, {
"id": "AU",
"label": "Autumn"
}]
},
"dataset": [{
"data": [{
"rowid": "LA",
"columnid": "WI",
"value": "60.10",
"colorRangeLabel": "Warm"
}, {
"rowid": "LA",
"columnid": "SP",
"displayValue": "64.5",
"colorRangeLabel": "Warm"
}, {
"rowid": "LA",
"columnid": "SU",
"displayValue": "68.2",
"colorRangeLabel": "Warm"
}, {
"rowid": "LA",
"columnid": "AU",
"displayValue": "65.7",
"colorRangeLabel": "Warm"
}, {
"rowid": "NY",
"columnid": "WI",
"displayValue": "33.7",
"colorRangeLabel": "Freezing"
}, {
"rowid": "NY",
"columnid": "SP",
"displayValue": "57.8",
"colorRangeLabel": "Warm"
}, {
"rowid": "NY",
"columnid": "SU",
"displayValue": "74.49",
"colorRangeLabel": "Hot"
}, {
"rowid": "NY",
"columnid": "AU",
"displayValue": "57.6",
"colorRangeLabel": "Warm"
}, {
"rowid": "CH",
"columnid": "WI",
"displayValue": "22.89",
"colorRangeLabel": "Freezing"
}, {
"rowid": "CH",
"columnid": "SP",
"displayValue": "55.7",
"colorRangeLabel": "Warm"
}, {
"rowid": "CH",
"columnid": "SU",
"displayValue": "72.2",
"colorRangeLabel": "Hot"
}, {
"rowid": "CH",
"columnid": "AU",
"displayValue": "51.6",
"colorRangeLabel": "Warm"
}, {
"rowid": "HO",
"columnid": "WI",
"displayValue": "53.0",
"colorRangeLabel": "Warm"
}, {
"rowid": "HO",
"columnid": "SP",
"displayValue": "72.7",
"colorRangeLabel": "Hot"
}, {
"rowid": "HO",
"columnid": "SU",
"displayValue": "83.3",
"colorRangeLabel": "Hot"
}, {
"rowid": "HO",
"columnid": "AU",
"displayValue": "53.0",
"colorRangeLabel": "Warm"
}]
}],
"colorRange": {
"gradient": "0",
"color": [{
"code": "#6da81e",
"minValue": "0",
"maxValue": "50",
"label": "Freezing"
}, {
"code": "#f6bc33",
"minValue": "50",
"maxValue": "70",
"label": "Warm"
}, {
"code": "#e24b1a",
"minValue": "70",
"maxValue": "85",
"label": "Hot"
}]
}
}
}
);
fusioncharts.render();
});
</script> <div id="chart-container">FusionCharts XT will load here!</div>

XML的配置(前面两种皆可以实现,这里的XML只供参考)

 <?xml version="1.0" encoding="UTF-8"?>

 <chart theme="fint" caption="Top 4 US Cities" subcaption="Average temperature (°F) in seasons (2013-14)" xaxisname="Seasons" yaxisname="Cities" showplotborder="1" mapbycategory="1">
<rows>
<row id="NY" label="New York" />
<row id="LA" label="Los Angeles" />
<row id="CH" label="Chicago" />
<row id="HO" label="Houston" />
</rows>
<columns>
<column id="wI" label="Winter" />
<column id="SU" label="Summer" />
<column id="SP" label="Spring" />
<column id="AU" label="Autumn" />
</columns>
<dataset>
<set rowid="LA" columnid="WI" value="60.10" colorrangelabel="Warm" />
<set rowid="LA" columnid="SP" displayvalue="64.5" colorrangelabel="Warm" />
<set rowid="LA" columnid="SU" displayvalue="68.2" colorrangelabel="Warm" />
<set rowid="LA" columnid="AU" displayvalue="65.7" colorrangelabel="Warm" />
<set rowid="NY" columnid="WI" displayvalue="33.7" colorrangelabel="Freezing" />
<set rowid="NY" columnid="SP" displayvalue="57.8" colorrangelabel="Warm" />
<set rowid="NY" columnid="SU" displayvalue="74.49" colorrangelabel="Hot" />
<set rowid="NY" columnid="AU" displayvalue="57.6" colorrangelabel="Warm" />
<set rowid="CH" columnid="WI" displayvalue="22.89" colorrangelabel="Freezing" />
<set rowid="CH" columnid="SP" displayvalue="55.7" colorrangelabel="Warm" />
<set rowid="CH" columnid="SU" displayvalue="72.2" colorrangelabel="Hot" />
<set rowid="CH" columnid="AU" displayvalue="51.6" colorrangelabel="Warm" />
<set rowid="HO" columnid="WI" displayvalue="53.0" colorrangelabel="Warm" />
<set rowid="HO" columnid="SP" displayvalue="72.7" colorrangelabel="Hot" />
<set rowid="HO" columnid="SU" displayvalue="83.3" colorrangelabel="Hot" />
<set rowid="HO" columnid="AU" displayvalue="53.0" colorrangelabel="Warm" />
</dataset>
<colorrange gradient="0">
<color code="#6da81e" minvalue="0" maxvalue="50" label="Freezing" />
<color code="#f6bc33" minvalue="50" maxvalue="70" label="Warm" />
<color code="#e24b1a" minvalue="70" maxvalue="85" label="Hot" />
</colorrange>
</chart>

 

funsioncharts的图表操作heatmap的更多相关文章

  1. Gremlin--一种支持对图表操作的语言

    Gremlin 是操作图表的一个非常有用的图灵完备的编程语言.它是一种Java DSL语言,对图表进行查询.分析和操作时使用了大量的XPath. Gremlin可用于创建多关系图表.因为图表.顶点和边 ...

  2. iReport4.6.0图表操作

    做报表.图表肯定是少不了的.尽管是疲惫的周一工作还是要做啊... 第一步:创建一个新的空白项目,数据源创建这个网上非常多资料,不是本章重点就不再详述 第二步:iReport界面,窗体->组件面板 ...

  3. 帆软报表(finereport)图表操作细节

    图表间之间的组件间隔:body-->属性-->布局-->组件间隔 决策报表背景水印:body-->属性-->水印 仪表盘指针/枢纽/背景颜色:样式-->系列 柱形图 ...

  4. VUE之图表操作

    参考 v-charts文档有详细说明,不多做介绍. 感谢博主的梳理,我在此基础之上稍作修改 效果展示: 在工作中遇到了就记录下来,留作备用,以便今后查阅: 安装 npm install vue-sch ...

  5. Excel操作类

    '引入Excel的COM组件 Imports System Imports System.Data Imports System.Configuration Imports System.Web Im ...

  6. 纯JavaScrip图表插件——Highcharts

    简介 Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站和非商业用途使用.目前H ...

  7. labview图形和图表的类型

    http://zone.ni.com/reference/zhs-XX/help/371361L-0118/lvconcepts/types_of_graphs_and_charts/ LabVIEW ...

  8. 美丽的Java图表类库

    摘要 在使用java做后台站点的开发张,图表和报表功能都是不可或缺 的.本文推荐了8款最精彩实用的Java图表应用,大部分图表应用的功能都类似,主要在于界面的美观性和使用的灵活性上有一点高低. 正文 ...

  9. Android绘图机制(四)——使用HelloCharts开源框架搭建一系列炫酷图表,柱形图,折线图,饼状图和动画特效,抽丝剥茧带你认识图表之美

    Android绘图机制(四)--使用HelloCharts开源框架搭建一系列炫酷图表,柱形图,折线图,饼状图和动画特效,抽丝剥茧带你认识图表之美 这里为什么不继续把自定义View写下去呢,因为最近项目 ...

随机推荐

  1. Thinking in Java——笔记(15)

    Generics The term "generic" means "pertaining or appropriate to large groups of class ...

  2. java线程同步 以及wait 和notify用法

    package test; public class ThreadTest2 extends Thread { private int threadNo; private String lock; p ...

  3. c++多态的实现

    在面试中常常会有面试官问道,c++的多态的实现机制.那么,多态到底该如何实现呢? 多态的简单介绍 一般来说,多态分为两种,静态多态和动态多态.静态多态也称编译时多态,主要包括模板和重载.而动态多态则是 ...

  4. 在没有安装有mvc3的主机上部署asp.net mvc3网站,需要包含的DLL文件

    原文:在没有安装有mvc3的主机上部署asp.net mvc3网站,需要包含的DLL文件 http://hi.baidu.com/aspxdiyer/blog/item/5515a69943232f1 ...

  5. wamp下多域名配置问题

    1.找到wamp安装目录的apache安装目录 找到 httpd.conf文件 例如我安装的目录为 E:\wamp\bin\apache\apache2.2.8\conf\httpd.conf 也可以 ...

  6. a 添加href后当前栏目如何高亮显示

    //nav $(".nav li a").each(function() { $this = $(this); if ($this[0].href == String(window ...

  7. Android 基于Android的手机邮件收发(JavaMail)之三(邮件接收)

    初次做这个程序的时候,是仿照着网上别人的程序做的.因为本人比较菜,是一个新手,以前的基础知识没有学好,所以尽管有了别人的代码但是还是不知道怎么在界面上显示出它的效果来,废话不多少,现在就贴出我的参考程 ...

  8. jQuery语法介绍

    来自:http://www.cnblogs.com/ccorz/p/5803353.html jQuery类似于Python中模块的概念,是集成了javaScript和Dom的模块.大致分为两种版本1 ...

  9. jNotify:操作结果信息提示条

    我们在提交表单后,通过Ajax响应后台返回结果,并在前台显示返回信息,jNotify能非常优雅的显示操作结果信息.jNotify是一款基于jQuery的信息提示插件,它支持操作成功.操作失败和操作提醒 ...

  10. VSCode+Ionic+Apache Ripple开发环境搭建

    vscode作为一个轻量级编辑器,有其独特的魅力. 安装Ionic:npm install -g ionic 安装Apache Ripple模拟器: npm install -g ripple-emu ...