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
产品介绍和下载地址请:点击