funsioncharts的图表操作heatmap

时间：2016-05-25 13:17:13 阅读：234 评论：0 收藏：0 [点我收藏+]

标签：

网址：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>

funsioncharts的图表操作heatmap

标签：

原文地址：http://www.cnblogs.com/fmling/p/5524008.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行