控件中国网现已改版,您看到的是老版本网站的镜像,系统正在为您跳转到新网站首页,请稍候.......
中国最专业的商业控件资讯网产品咨询电话:023-67870900 023-67871946
产品咨询EMAIL:SALES@COMPONENTCN.COM

AnyChart在JSP的应用中如何从数据库获得数据

作者:控件中国网 出处:控件中国网 2010年08月17日 阅读:

AnyChart支持从数据库获取数据,下面以在JSP平台下使用JSTL从MySQL数据库获取数据为例:

  •  从数据库新建两个表

1.anychart_sample_products:

ID name
1 Product A
2 Product B

 

2. anychart_sample_orders

ID product_id date volume
1 1 2007-01-01 120
2 1 2007-02-01 230
3 1 2007-03-01 160
4 1 2007-04-01 540
5 1 2007-05-01 110
6 2 2007-02-01 130
7 2 2007-03-01 250
8 2 2007-04-01 320
9 2 2007-05-01 420

新建一个项目:AnyChartJSPJSTLSQL,复制AnyChart.jar、jstl.jar、standard.jar
mysql-connector-java-5.1.6-bin.jar到Lib文件夹下,然后添加一个data.jsp页面,并复制下面的代码到JSP页面里,并把数据库地址改为自己的服务器地址:
<%@ page contentType="text/xml; charset=UTF-8" isELIgnored ="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql" %>
<sql:setDataSource driver="com.mysql.jdbc.Driver"
  url="jdbc:mysql://localhost/anychart_sample_database?useUnicode=true&characterEncoding=utf8"
  user="root" password="1"/>
<anychart>
  <charts>
    <chart>
      <chart_settings>
        <title>
        <text>Products Sales Volume by Products</text>
        </title>
        <axes>
          <x_axis>
            <title>
              <text>Product Name</text>
            </title>
          </x_axis>
          <y_axis>
            <title>
              <text>Volume</text>
            </title>
            <labels>
              <format>{%Value} $</format>
            </labels>
          </y_axis>
        </axes>
      </chart_settings>
      <data_plot_settings>
        <bar_series>
          <tooltip_settings enabled="true">
            <format><![CDATA[{%Name}{enabled:false} Volume: {%YValue}$]]> </format>
          </tooltip_settings>
        </bar_series>
      </data_plot_settings>

      <data>
        <series name="Products Report">
          <sql:query var="q">
            select p.name as name, sum(o.volume) as value
              from anychart_sample_products p,
                  anychart_sample_orders o
              where p.id = o.product_id
              group by p.name
          </sql:query>
          <c:forEach var="item" items="${q.rows}">
            <point name="${item.name}" y="${item.value}" />
          </c:forEach>
        </series>
      </data>
    </chart>
  </charts>
</anychart>

在Index.jsp页面里添加下面的代码:

<%@ taglib prefix="any" uri="http://www.anychart.com" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>Charting data from array</title>
    </head>
    <body>
        <any:chart width="550" height="400" xmlFile="./data.jsp" />
    </body>
</html>

具体可以下载事例:AnyChartJSPJSTLSQL.zip

产品介绍和下载地址请:点击 

热推产品

  • ActiveReport... 强大的.NET报表设计、浏览、打印、转换控件,可以同时用于WindowsForms谀坔攀戀Forms平台下......
  • AnyChart AnyChart使你可以创建出绚丽的交互式的Flash和HTML5的图表和仪表控件。可以用于仪表盘的创......
首页 | 新闻中心 | 产品中心 | 技术文档 | 友情连接 | 关于磐岩 | 技术支持中心 | 联系我们 | 帮助中心 Copyright-2006 ComponentCN.com all rights reserved.重庆磐岩科技有限公司(控件中国网) 版权所有 电话:023 - 67870900 传真:023 - 67870270 产品咨询:sales@componentcn.com 渝ICP备12000264号 法律顾问:元炳律师事务所 重庆市江北区塔坪36号维丰创意绿苑A座28-5 邮编:400020
在线客服
在线客服系统
在线客服
在线客服系统