1、在web项目目录下，新建column2D.html
column2D.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2D柱形图</title>
<script type="text/javascript" src="Scripts/JS/jquery-1.10.2.js"></script>
<script type="text/javascript" src="Scripts/JS/FusionCharts.js"></script>
<style type="text/css">
body{
width:100%;
height:100%;
}
#column{
background-color: #CCCCCC;
}
</style>
<script type="text/javascript">
$(function(){
var columnChart = new FusionCharts( "Scripts/FusionChart/MSColumn2D.swf", "columnChartId", "1320", "610", "0", "1" );
columnChart.setXMLUrl("column.xml");
columnChart.render("column");
});
</script>
</head>
<body>
<div id="column"></div>
</body>
</html>
2、提供数据源的xml，column.xml
column.xml：
<?xml version="1.0" encoding="UTF-8"?>
<chart caption='' xAxisName='月份' yAxisName='月收入' showValues='0' baseFontSize='12'
useRoundEdges='1' numDivLines='8'>
<categories>
<category label='一月' />
<category label='二月' />
<category label='三月' />
<category label='四月' />
<category label='五月' />
<category label='六月' />
<category label='七月' />
<category label='八月' />
<category label='九月' />
<category label='十月' />
</categories>
<dataset seriesName='张三'>
<set value='27400' />
<set value='29800'/>
<set value='25800' />
<set value='26800' />
<set value='29600' />
<set value='32600' />
<set value='31800' />
<set value='36700' />
<set value='29700' />
<set value='31900' />
<set value='34800' />
</dataset>
<dataset seriesName='李四'>
<set value='10000'/>
<set value='11500'/>
<set value='12500'/>
<set value='15000'/>
<set value='11000' />
<set value='9800' />
<set value='11800' />
<set value='19700' />
<set value='21700' />
<set value='21900' />
<set value='22900' />
<set value='20800' />
</dataset>
<dataset seriesName='王五'>
<set value='27400' />
<set value='29800'/>
<set value='25800' />
<set value='26800' />
<set value='29600' />
<set value='32600' />
<set value='31800' />
<set value='36700' />
<set value='29700' />
<set value='31900' />
<set value='34800' />
</dataset>
<dataset seriesName='赵钱'>
<set value='10000'/>
<set value='11500'/>
<set value='12500'/>
<set value='15000'/>
<set value='11000' />
<set value='9800' />
<set value='11800' />
<set value='19700' />
<set value='21700' />
<set value='21900' />
<set value='22900' />
<set value='20800' />
</dataset>
<dataset seriesName='钱八'>
<set value='27400' />
<set value='29800'/>
<set value='25800' />
<set value='26800' />
<set value='29600' />
<set value='32600' />
<set value='31800' />
<set value='36700' />
<set value='29700' />
<set value='31900' />
<set value='34800' />
</dataset>
<dataset seriesName='刘辉'>
<set value='10000'/>
<set value='11500'/>
<set value='12500'/>
<set value='15000'/>
<set value='11000' />
<set value='9800' />
<set value='11800' />
<set value='19700' />
<set value='21700' />
<set value='21900' />
<set value='22900' />
<set value='20800' />
</dataset>
</chart>
3、运行http://localhost:8080/FusionChart/column2D.html，结果如下图：
分享到：
相关推荐
在本文中，我们将深入探讨如何使用LiveCharts.Wpf.Core库（版本0.9.8）在C# WPF环境中创建各种图形报表，包括柱状图、曲线图、分组柱状图以及饼状图。这些图表是数据可视化的重要工具，能够帮助用户直观地理解和解析...
Axure设计原型+分组柱状图（中继器）；Axure设计原型+分组柱状图（中继器）；Axure设计原型+分组柱状图（中继器）；Axure设计原型+分组柱状图（中继器）；Axure设计原型+分组柱状图（中继器）；Axure设计原型+分组...
基于Matlab绘图复刻分组柱状图完整源码+数据（高分课程设计）.zip 已获导师指导并通过的97分的高分课程设计项目，可作为课程设计和期末大作业，下载即用无需修改，项目完整确保可以运行。 基于Matlab绘图复刻分组...
Matplotlib包_画复杂分组柱状图，分3组画不同颜色柱状图，涉及技术：设置标签标题，图例、x,y轴的范围，设置标签、添加注释、设置紧凑布局等等
分组柱状图、折线图+误差棒+柱状图+散点抖动+灰色背景+图片叠加、分层聚类分析图、和弦图+颜色修改+标签旋转、带树状图的环形热图、分组环形热图、热图+差异气泡图、堆叠柱状图+哑铃图、组合泰勒图、旋转相关系数...
基于Matlab绘图复刻分组柱状图完整源码+数据（课程设计）.zip 已获导师指导并通过的97分的高分课程设计项目，可作为课程设计和期末大作业，下载即用无需修改，项目完整确保可以运行，还含有其他MATLAB 绘图复刻资料...
在本资源中，我们主要探讨如何使用Matlab来实现多组并列柱状图的填充画法。Matlab是一款强大的数学计算和数据可视化软件，它提供了丰富的图形库，能够帮助用户绘制各种复杂的图表，包括柱状图。在这个教程中，我们将...
在MATLAB中，绘制分组柱状图是一种常见的数据可视化方式，它可以帮助我们直观地比较不同类别或分组之间的数值差异。在这个主题中，我们将深入探讨如何使用MATLAB来创建分组柱状图，以及一些相关的高级技巧和知识点。...
柱形图_labview柱状图_labview柱状图"是一个关于使用Labview创建柱状图的项目，主要关注的是数据的可视化表示，这对于数据分析和结果展示至关重要。 柱状图是一种常用的数据表示方式，它通过长条的高度来显示各个...
**FusionCharts是一款强大的数据可视化工具，专为创建吸引人的报表、饼形图和柱状图而设计。作为开源代码，它为开发者提供了丰富的功能和灵活性，使得在各种项目中集成图表变得更加简单。** **一、FusionCharts的...
在本文中，我们将深入探讨如何在WPF（Windows Presentation Foundation）环境中实现柱状图。WPF是.NET Framework的一部分，提供了一种强大的UI开发工具，允许开发者创建丰富的、交互式的桌面应用程序。柱状图是一种...
在MATLAB中，柱状图是一种常用的数据可视化工具，它能直观地展示各类别数据的大小。当柱状图结合渐变色时，可以更好地突出数据的差异和趋势，增加图表的美观性和可读性。本教程将详细介绍如何在MATLAB中创建具有渐变...
在LabVIEW中创建柱状图是一种常见的数据可视化方式，它可以帮助我们直观地理解一组数据的分布情况。柱状图V3.0-112.vi是一个LabVIEW程序，专门用于制作柱状图，适用于进行各种数据分析任务。下面将详细阐述如何在...
VB 对分组统计数据进行分析，并使用柱状图来显示，按仓库分组小计。下面是相关代码： Private Sub Command1_Click() Adodc1.RecordSource = "select 仓库,现库存数量 from (SELECT sum(库存) as 现库存数量,仓库...
柱状图 柱状图 柱状图 柱状图 柱状图 柱状图 柱状图 柱状图 柱状图 柱状图 柱状图 柱状图 柱状图 柱状图 柱状图 柱状图 柱状图 柱状图 柱状图 柱状图 柱状图 柱状图 柱状图 柱状图 柱状图 柱状图
在本文中，我们将深入探讨如何使用Delphi编程语言来实现柱状图，这对于数据分析和可视化至关重要。Delphi，作为一个强大的Windows应用程序开发工具，提供了一系列组件和API，使得开发者能够轻松创建各种类型的图表，...
在VB（Visual Basic）开发环境中，创建一个窗体显示柱状图是一项常见的任务，尤其在数据分析和可视化领域。本文将详细讲解如何利用VB来实现这一功能，并结合数据库数据进行展示。 首先，我们要明白柱状图是一种图形...
css柱状图3Dechars图，css柱状图3Dechars图，css柱状图3Dechars图，css柱状图3Dechars图，css柱状图3Dechars图，css柱状图3Dechars图，css柱状图3Dechars图，css柱状图3Dechars图，css柱状图3Dechars图，css柱状图3...
1、资源内容：基于Matlab绘图复刻分组柱状图（完整源码+数据）.rar 2、代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 3、适用对象：计算机，电子信息工程、数学等专业的大学生课程设计和毕业...
ECharts 是一个由百度开发的开源 JavaScript 数据可视化库，它提供了丰富的图表类型，如柱状图、折线图、饼图、散点图等，并且支持地图图表，包括省份地图。"echarts-省份地图+柱状图组合.zip" 是一个包含 ECharts ...