jfreechart插件将数据展示成饼状图、柱状图和折线图

 本文以展示柱状图为例进行介绍,当然这仅仅是一种方法而已;还有很多方法可以用于展示图表,例如自定义图表标签、使用jfreechart插件等;

1、导入js文件,包含了很多展示方法:

代码如下:

<script type="text/javascript" src=<select:link page="/js/ChartObject.js"/>></script> <script type="text/javascript" src=<select:link page="/js/FusionCharts.js"/>></script>

 

2、从后台获取数据:

1
2
3
4
5
6
7
8
9

function init(){
 
var name3="<%=request.getAttribute("accountlist.name")%>";
var value3="<%=request.getAttribute("accountlist.values")%>";
var rate3="<%=request.getAttribute("accountlist.valueshb")%>";
showChart4(name3,rate3);
//showChart3(name3,value3,"");
 
}

3、将数据赋值给图例:

1
2
3
4
5
6
7
8
9
10
11
12

function showChart4(names,values){
var chartObj = new ChartObject();
var xmlString="";
chartObj.caption="各承运单位车辆销运比图 ";
chartObj.showValues='0';
chartObj.showLabels='1';
chartObj.sNumberSuffix='%25';
xmlString = chartObj.createDualYMSColumnXmlByValues(names,values,"","销运比=卷烟销量%车辆运力;","");
var chart = new FusionCharts("Charts/MSColumn3DLineDY.swf", "ChartId2", "1000", "230", "0", "0");
chart.setDataXML(xmlString);
chart.render("chartDiv2");
}

4、在jsp页面中只需写入:

 

代码如下:

<div style="margin-top:3px;margin-left:3px;"><span id="chartDiv2" style="width:100%;"></span></div>

 

5.结果展示如下所示:

时间: 2024-08-03 09:45:11

jfreechart插件将数据展示成饼状图、柱状图和折线图的相关文章

jfreechart插件将数据展示成饼状图、柱状图和折线图_javascript技巧

本文以展示柱状图为例进行介绍,当然这仅仅是一种方法而已:还有很多方法可以用于展示图表,例如自定义图表标签.使用jfreechart插件等: 1.导入js文件,包含了很多展示方法: 复制代码 代码如下: <script type="text/javascript" src=<select:link page="/js/ChartObject.js"/>></script> <script type="text/jav

asp.net中生成饼状与柱状图实例_实用技巧

本文实例讲述了asp.net中生成饼状与柱状图的实现方法.分享给大家供大家参考.具体方法如下: 一.生成图形的公共方法: 复制代码 代码如下: using System; using System.Collections.Generic; using System.Text; // //using System.Data; //using System.Web.UI.WebControls; // using System.Drawing; using System.Drawing.Imagin

highchart 两个按钮切换柱状图与折线图 数据是从数据库中得到的

问题描述 highchart 两个按钮切换柱状图与折线图 数据是从数据库中得到的 两个按钮切换柱状图与折线图 数据是从数据库中得到的 highchart 解决方案 柱状和折线都是展示的是同一组数据吗.如果不是,可以先定义好chart ,然后在使用ajax访问后台查询数据,然后再进行初始化chart,并且赋值

用JFreeChart画柱状图和折线图的的复合图(当数据小于0时,柱子显示绿色,在Y轴负方,上数据大于0时,柱子显示红色,在Y轴正方)怎样画?

问题描述 [b][/b] 问题补充:我试过你说的这种方法,但判断的时候无效Rainbow702 写道 解决方案 这个柱状图,显示不同的颜色可以参考,官方的demo中的 dual axis demo[url]http://www.jfree.org/jfreechart/samples.html[/url]解决方案二:为什么判断与 0 的大小关系会行不通呢?这个有点说不过去啊?解决方案三:我试过你说的这种方法,但判断的时候无效?你是指判断什么?判断与0的关系?解决方案四:以前只是使用过 JFree

《R数据可视化手册》——2.2 绘制折线图

2.2 绘制折线图 问题如何绘制折线图? 方法使用plot()函数绘制折线图(见图2-3左图)时需向其传递一个包含x值的向量和一个包含y值的向量,并使用参数type="l": plot(pressure$temperature, pressure$pressure, type="l") 如果要向图形中添加数据点或者多条折线(见图2-3右图),则需先用plot()函数绘制第一条折线,再通过points()函数和lines()函数分别添加数据点和更多折线: plot(p

D3.js实现饼状图的方法详解_javascript技巧

前言 小编在之前已经跟大家分享过关于怎样用柱状图和折线图这两种基本图表.这两种图表都是有坐标轴的,现在来说一种没有坐标轴的图表--饼图. 饼状图实现 还是和之前一样,我们先把简单的画图框架搭起来,添加SVG画布.但是这里需要注意的是,为了方便后面画饼图上的弧形,我们把组合这些元素的g元素移动到画布的中心: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

SSRS报表折线图数据标签怎么去除箭头指示?

问题描述 SSRS报表折线图数据标签怎么去除箭头指示? 制作报表折线图时,开启数据标签,预览报表,数据标签出现指向箭头,该如何去除,做到只显示数字.开发教程">

jfreechart jsp mysql-jfreechart怎么从mysql读取数据生成柱状图饼状图并显示到web页面

问题描述 jfreechart怎么从mysql读取数据生成柱状图饼状图并显示到web页面 jfreechart怎么从mysql读取数据生成柱状图饼状图并显示到web页面,最好能有个实例.

highcharts如何从SQL Server数据库读取数据生成饼状图

问题描述 highcharts如何从SQL Server数据库读取数据生成饼状图 highcharts如何从SQL Server数据库读取数据生成饼状图 解决方案 这个也是我想关注的问题