ChartDirector是非免费的,但是有破解方法就是将一个授权文件放在web工程的WEB-INF/CLASSES下面。这里只给出一个例子的代码,如果大家想试试可以到资源中搜索chartdirector下载它的示例工程及api,还有授权文件(在web工程的WEB-INF/CLASSES下面)。
1.曲线图(可点击):
1.曲线图(可点击):
- <%@page import="ChartDirector.*" %>
- <% // 曲线图数据
- double[] data0 = {50, 55, 47, 36, 42, 49, 63, 62, 73, 59, 56, 50, 64, 60, 67, 67, 58, 59, 73, 77, 84, 82, 80, 84};
- double[] data1 = {36, 28, 25, 33, 38, 20, 22, 30, 25, 33, 30, 24, 28, 36, 30, 45, 46, 42, 48, 45, 43, 52, 64, 70};
- // 图形的横坐标
- String[] labels = {"Jan-04", "Feb-04", "Mar-04", "Apr-04", "May-04", "Jun-04", "Jul-04", "Aug-04", "Sep-04", "Oct-04", "Nov-04", "Dec-04", "Jan-05", "Feb-05", "Mar-05", "Apr-05", "May-05", "Jun-05", "Jul-05", "Aug-05", "Sep-05", "Oct-05", "Nov-05", "Dec-05"};
- // 创建一个大小 600 x 360的图形
- XYChart c = new XYChart(600, 360, 0xeeeeff, 0x000000, 1); c.setRoundedFrame(); //设置图形圆角
- // 设置绘图区的大小及格式
- c.setPlotArea(55, 60, 520, 240, 0xffffff, -1, -1, 0xcccccc, 0xcccccc);
- //添加图例
- LegendBox legendBox = c.addLegend(55, 58, false, "Arial Bold", 9); legendBox.setBackground(Chart.Transparent);//图例背景色透明
- //设置纵坐标的刻度间隔
- c.yAxis().setAutoScale(0.1);
- // 添加图形标题
- ChartDirector.TextBox title = c.addTitle("Monthly Revenue for Year 2000/2001", "Times New Roman Bold Italic", 15, 0xffffff); title.setBackground(0x0000cc, 0x000000, Chart.glassEffect(Chart.ReducedGlare));
- //为y轴添加标题
- c.yAxis().setTitle("Month Revenue (USD millions)");
- // 为x轴添加坐标
- c.xAxis().setLabels(labels).setFontAngle(90); //90是角度,设置横坐标的显示格式
- //在 x = 17 的位置添加一个标记
- Mark mark = c.xAxis2().addMark(17, 0x809933ff, "Merge with Star Tech", "Arial Bold");
- mark.setFontColor(0x9933ff);
- // 添加图形右下角显示信息(这里是版权信息)
- ChartDirector.TextBox ccopyRight = c.addText(575, 295, "(c) Copyright Space Travel Ltd", "Arial Bold"); copyRight.setAlignment(Chart.BottomRight);
- // 添加绘图区到图形中(LineLayer是曲线图)
- LineLayer layer = c.addLineLayer();
- // 设置曲线宽度
- layer.setLineWidth(3);
- // 添加数据
- layer.addDataSet(data0, -1, "Enterprise");
- layer.addDataSet(data1, -1, "Consumer");
- // 创建图形文件
- String cchart1URL = c.makeSession(request, "chart1");
- String cchartImageMap = c.getHTMLImageMap("xystub.jsp", "", "title='{dataSetName} @ {xLabel} = USD {value|0} millions'");
- String legendImageMap = legendBox.getHTMLImageMap( "javascript:popMsg('the legend key [{dataSetName}]');", " ", "title='This legend key is clickable!'");
- String titletitleCoor = title.getImageCoor();
- String markmarkCoor = mark.getImageCoor();
- String copyRightcopyRightCoor = copyRight.getImageCoor(); %>
- <html>
- <body topmargin="5" leftmargin="5" rightmargin="0" marginwidth="5" marginheight="5">
- <div style="font-size:18pt; font-family:verdana; font-weight:bold"> Custom Clickable Objects </div>
- <hr color="#000080"> <div style="font-size:10pt; font-family:verdana; margin-bottom:20">
- <div style="font-size:10pt; font-family:verdana; width:600px; margin-bottom:20"> In the following chart, the lines, legend keys, title, copyright, and the "Merge with Star Tech" text are all clickable! </div>
- <img src="<%=response.encodeURL("getchart.jsp?"+chart1URL)%>" border="0" usemap="#map1">
- <map name="map1">
- <%=chartImageMap%>
- <%=legendImageMap%>
- <area <%=titleCoor%> href='javascript:popMsg("the chart title");' title='The title is clickable!'>
- <area <%=markCoor%> href='javascript:popMsg("the Merge with Star Tech mark");' title='The "Merge with Star Tech" text is clickable!'>
- <area <%=copyRightCoor%> href='javascript:popMsg("the copyright message");' title='The copyright text is clickable!'>
- </map>
- <SCRIPT>
- function popMsg(msg) { alert("You have clicked on " + msg + "."); } </SCRIPT>
- </body>
- </html>