funsioncharts的图表操作heatmap

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

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

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

图表展示

第一种方法

后台假数据

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

  1 <script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.powercharts.js"></script>
  2 <script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
  3
  4
  5 <script type="text/javascript">
  6
  7 FusionCharts.ready(function(){
  8     var fusioncharts = new FusionCharts({
  9     type: ‘heatmap‘,
 10     renderAt: ‘chart-container‘,
 11     width: ‘550‘,
 12     height: ‘300‘,
 13     dataFormat: ‘json‘,
 14     dataSource: {
 15         "chart": {
 16             "theme": "fint",
 17             "caption": "Top 4 US Cities",
 18             "subcaption": "Average temperature (°F) in seasons (2013-14)",
 19             "xAxisName": "Seasons",
 20             "yAxisName": "Cities",
 21             "showPlotBorder": "1",
 22             "mapByCategory": "1"
 23         },
 24         "rows": {
 25             "row": [{
 26                 "id": "NY",
 27                 "label": "New York"
 28             }, {
 29                 "id": "LA",
 30                 "label": "Los Angeles"
 31             }, {
 32                 "id": "CH",
 33                 "label": "Chicago"
 34             }, {
 35                 "id": "HO",
 36                 "label": "Houston"
 37             }]
 38         },
 39         "columns": {
 40             "column": [{
 41                 "id": "wI",
 42                 "label": "Winter"
 43             }, {
 44                 "id": "SU",
 45                 "label": "Summer"
 46             }, {
 47                 "id": "SP",
 48                 "label": "Spring"
 49             }, {
 50                 "id": "AU",
 51                 "label": "Autumn"
 52             }]
 53         },
 54         "dataset": [{
 55             "data": [{
 56                 "rowid": "LA",
 57                 "columnid": "WI",
 58                 "value": "60.10",
 59                 "colorRangeLabel": "Warm"
 60             }, {
 61                 "rowid": "LA",
 62                 "columnid": "SP",
 63                 "displayValue": "64.5",
 64                 "colorRangeLabel": "Warm"
 65             }, {
 66                 "rowid": "LA",
 67                 "columnid": "SU",
 68                 "displayValue": "68.2",
 69                 "colorRangeLabel": "Warm"
 70             }, {
 71                 "rowid": "LA",
 72                 "columnid": "AU",
 73                 "displayValue": "65.7",
 74                 "colorRangeLabel": "Warm"
 75             }, {
 76                 "rowid": "NY",
 77                 "columnid": "WI",
 78                 "displayValue": "33.7",
 79                 "colorRangeLabel": "Freezing"
 80             }, {
 81                 "rowid": "NY",
 82                 "columnid": "SP",
 83                 "displayValue": "57.8",
 84                 "colorRangeLabel": "Warm"
 85             }, {
 86                 "rowid": "NY",
 87                 "columnid": "SU",
 88                 "displayValue": "74.49",
 89                 "colorRangeLabel": "Hot"
 90             }, {
 91                 "rowid": "NY",
 92                 "columnid": "AU",
 93                 "displayValue": "57.6",
 94                 "colorRangeLabel": "Warm"
 95             }, {
 96                 "rowid": "CH",
 97                 "columnid": "WI",
 98                 "displayValue": "22.89",
 99                 "colorRangeLabel": "Freezing"
100             }, {
101                 "rowid": "CH",
102                 "columnid": "SP",
103                 "displayValue": "55.7",
104                 "colorRangeLabel": "Warm"
105             }, {
106                 "rowid": "CH",
107                 "columnid": "SU",
108                 "displayValue": "72.2",
109                 "colorRangeLabel": "Hot"
110             }, {
111                 "rowid": "CH",
112                 "columnid": "AU",
113                 "displayValue": "51.6",
114                 "colorRangeLabel": "Warm"
115             }, {
116                 "rowid": "HO",
117                 "columnid": "WI",
118                 "displayValue": "53.0",
119                 "colorRangeLabel": "Warm"
120             }, {
121                 "rowid": "HO",
122                 "columnid": "SP",
123                 "displayValue": "72.7",
124                 "colorRangeLabel": "Hot"
125             }, {
126                 "rowid": "HO",
127                 "columnid": "SU",
128                 "displayValue": "83.3",
129                 "colorRangeLabel": "Hot"
130             }, {
131                 "rowid": "HO",
132                 "columnid": "AU",
133                 "displayValue": "53.0",
134                 "colorRangeLabel": "Warm"
135             }]
136         }],
137         "colorRange": {
138             "gradient": "0",
139             "color": [{
140                 "code": "#6da81e",
141                 "minValue": "0",
142                 "maxValue": "50",
143                 "label": "Freezing"
144             }, {
145                 "code": "#f6bc33",
146                 "minValue": "50",
147                 "maxValue": "70",
148                 "label": "Warm"
149             }, {
150                 "code": "#e24b1a",
151                 "minValue": "70",
152                 "maxValue": "85",
153                 "label": "Hot"
154             }]
155         }
156     }
157 }
158 );
159     fusioncharts.render();
160 });
161 </script>
162
163   <div id="chart-container">FusionCharts XT will load here!</div>

XML的配置（前面两种皆可以实现，这里的XML只供参考）

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

 

时间： 2024-10-13 02:01:13

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

图表操作

1.图表:用来更加直观的显示数据  名字:Chart,是在.NET4.0框架和更高版本中存在 1.添加标题:属性里的Titles集合,添加一个标题 2.指定数据源:DataSource 3.添加,移除Series,修改Series的标识名 4.绑定显示数据 chart1.DataSource=da.SelectAll()   造一个指定数据源 绑定X轴显示的数据: chart1.Series["Series1"].XValueMember = "Name"; 绑定Y

iReport4.6.0图表操作

做报表,图表肯定是少不了的,虽然是疲惫的周一工作还是要做啊... 第一步:创建一个新的空白项目,数据源创建这个网上很多资料,不是本章重点就不再详述 第二步:iReport界面,窗口->组件面板调出来,里面有一个Chart组件,直接将其拖动到新建的报表中,接下里会弹出 我们选择第一个,做一个pie chart,点击确定之后会有设置向导跟着向导一步一步来. 创建向导分为三步 : 选择或新建数据源 配置Keys和Values 完成 选择数据源: 在这里面,如果你英文比较好的话应该很容易就看得出来,第一

highcharts 图表操作实例

这个是前段时间做的一个项目模块,实现内容是调查问卷,如: 1:你的性别? 2:你的年龄? ...... 后台根据提交的内容,通过图表显示比例出来 废话就不说了,贴上代码: 注意,我项目是mvc框架 前台代码: <strong><span style="font-size:14px;"><div class="panel-body"> <table width="100%" class="tabl

VUE之图表操作

参考 v-charts文档有详细说明,不多做介绍. 感谢博主的梳理,我在此基础之上稍作修改 在工作中遇到了就记录下来,留作备用,以便今后查阅 <template> <el-main> <el-scrollbar> <el-row :gutter="20"> <el-col :span="12" class="echarts-item"> <el-card> <div c

labview图形和图表的类型

http://zone.ni.com/reference/zhs-XX/help/371361H-0118/lvconcepts/types_of_graphs_and_charts/ LabVIEW包含以下类型的图形和图表: 波形图和图表-显示采样率恒定的数据. XY图-显示采样率非均匀的数据及多值函数的数据. 强度图和图表-在二维图上以颜色显示第三个维度的值,从而在二维图上显示三维数据. 数字波形图-以脉冲或成组的数字线的形式显示数据. 混合信号图-显示波形图.XY图和数字波形图所接受的数据

使用PowerDesigner 15进行逆向工程生成数据库图表时，列的注释问题

上一章讲了对数据库进行逆向工程生成图表操作,可能会遇到无法生成注释的问题: 一.解决PowerDesigner逆向工程没有列注释 1.打开PowerDesigner 15,选择菜单:File→Reverse Engineer→Database 对数据库进行逆向工程生成PDM图表,选择一张表生成:                生成后双击图表,打开表属性,选择Columns选项,可以看到注释却是空的,而数据库里的表是有注释的            2.选择菜单:Database→Edit Curr

Python图表数据可视化Seaborn：3. 线性关系| 时间线| 热图

1. 线性关系数据可视化 lmplot() import numpy as np import pandas as pd import matplotlib.pyplot as plt import seaborn as sns % matplotlib inline sns.set_style("darkgrid") sns.set_context("paper") # 设置风格.尺度 import warnings warnings.filterwarnings

c#操作Excel模板，替换命名单元格或关键字形成报表

http://blog.sina.com.cn/s/blog_45eaa01a0102vqma.html一 建立Excel 模板文件 template.xls 1.1 插入命名单元格的方法: 左上角名称框,显示当前单元格的行列号C2,加入命名后会显示其命名name 方法一: (1) 点击 单元格“姓名”之后的单元格(2) 菜单 插入--名称--定义(3) 在框中输入 name 确保底部的引用位置为 =Users!$C$2   按“添加”.“确定”按钮 即可 方法二:(1) 点击 单元格“姓名”之

自动化办公：python操作Excel

1.安装 -- upgrade pippython -m pip install --- install pypipip install pypi 执行python setup.py install进行安装xlrd Python操作Excel,主要用到xlrd和xlwt这两个库,即xlrd是读Excel,xlwt是写Excel的库 pip install xlrdpip install xlwtpip install xlutilspip install xlsxwriter 2.操作一个简单的