Web图表开发--用ChartDirector画线形图

最新推荐文章于 2023-09-01 16:12:43 发布

转载最新推荐文章于 2023-09-01 16:12:43 发布 · 1.4k 阅读

标签

#ChartDirector #线形图

ChartDirector 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何利用ChartDirector创建带有数据标签的线形图，并通过实例详细展示了设置图表背景、轴线样式、图例及标题等过程。

如何使用ChartDirector 画线形图？在下文中将以实例进行说明。

如果要在线的顶部显示数值，可以调用Layer的setDataLabelFormat方法设置，

范例：layer.setDataLabelFormat("{value}");

 
        <%@ page language="java"import="java.util.*,com.chinaba.*"pageEncoding="UTF-8"%>
       
        <%@pageimport="ChartDirector.*"%>
       
        <% List list =(List) request.getAttribute("results");
       
        ints =list.size();
       
        double[] data=newdouble[s];
       
        String[] labels=newString[s];
       
         for(inti=0;i<list.size();i++){
       
         infobean info = (infobean)list.get(i);
       
                 data[i]=info.getC();
       
                 labels[i]=info.getA();
       
                 out.println(data[i]);
       
                 out.println(labels[i]);
       
         }
       
        request.setCharacterEncoding("utf-8");
       
        //支持中文
       
        // Create a XYChart object of size 600 x 300 pixels, with a pale red (ffdddd)
       
        // background, black border, 1 pixel 3D border effect and rounded corners.
       
        XYChart c =newXYChart(600,300,0xffdddd,0x000000,1);
       
        c.setDefaultFonts("SIMSUN.TTC","simhei.ttf");
       
        c.setRoundedFrame();
       
        //Set search path to current JSP directory for loading icon images
       
        c.setSearchPath(getServletConfig().getServletContext(), request);
       
        // Set the plotarea at (55, 58) and of size 520 x 195 pixels, with white (ffffff)
       
        // background. Set horizontal and vertical grid lines to grey (cccccc).
       
        c.setPlotArea(55,58,520,195,0xffffff, -1, -1,0xcccccc,0xcccccc);
       
        // Add a legend box at (55, 32) (top of the chart) with horizontal layout. Use 9 pts
       
        // Arial Bold font. Set the background and border color to Transparent.
       
        c.addLegend(55,32,false,"Arial Bold",9).setBackground(Chart.Transparent);
       
        // Add a title box to the chart using 15 pts Times Bold Italic font. The title is in
       
        // CDML and includes embedded images for highlight. The text is white (ffffff) on a
       
        // dark red (880000) background, with soft lighting effect from the right side.
       
        c.addTitle(
       
            "<*block,valign=absmiddle*><*img=star.png*><*img=star.png*> 每日任务单统计 "+
       
            "<*img=star.png*><*img=star.png*><*/*>","",
       
            15,0xffffff).setBackground(0x880000, -1, Chart.softLighting(Chart.Right));
       
        // Add a title to the y axis
       
        c.yAxis().setTitle("Energy Concentration (KJ per liter)");
       
        // Set the labels on the x axis
       
        c.xAxis().setLabels(labels);
       
        // Add a title to the x axis using CMDL
       
        c.xAxis().setTitle(
       
            "<*block,valign=absmiddle*><*img=clock.png*>  Elapsed Time (hour)<*/*>");
       
        // Set the axes width to 2 pixels
       
        c.xAxis().setWidth(2);
       
        c.yAxis().setWidth(2);
       
        // Add a spline layer to the chart
       
        SplineLayer layer = c.addSplineLayer();
       
        // Set the default line width to 2 pixels
       
        layer.setLineWidth(2);
       
        // Add a data set to the spline layer, using blue (0000c0) as the line color, with
       
        // yellow (ffff00) circle symbols.
       
        //layer.addDataSet(data1, 0x0000c0, "Target Group").setDataSymbol(Chart.CircleSymbol,
       
        //    9, 0xffff00);
       
        // Add a data set to the spline layer, using brown (982810) as the line color, with
       
        // pink (f040f0) diamond symbols.
       
        layer.addDataSet(data,0x982810,"day").setDataSymbol(Chart.DiamondSymbol,
       
            11,0xf040f0);
       
        layer.setDataLabelFormat("{value}");
       
        // Add a custom CDML text at the bottom right of the plot area as the logo
       
        c.addText(575,250,
       
            "<*block,valign=absmiddle*><*img=small_molecule.png*> <*block*><*font=Times "+
       
            "New Roman Bold Italic,size=10,color=804040*>Molecular\nEngineering<*/*>"
       
            ).setAlignment(Chart.BottomRight);
       
        // Output the chart
       
        String chart1URL = c.makeSession(request,"chart1");
       
        // Include tool tip for the chart
       
        String imageMap1 = c.getHTMLImageMap("","",
       
            "title='{dataSetName} at t = {xLabel} hour: {value} KJ/liter'");
       
        %>
       
        <html>
       
        <body style="margin:5px 0px 0px 5px">
       
        <div style="font-size:18pt; font-family:verdana; font-weight:bold">
       
            Spline Line Chart
       
        </div>
       
        <hr color="#000080">
       
        <div style="font-size:9pt; font-family:verdana; margin-bottom:1.5em">
       
            <a href="viewsource.jsp?file=<%=request.getServletPath()%>">View Source Code</a>
       
        </div>
       
        <img src='<%=response.encodeURL("/shenlei/getchart.jsp?"+chart1URL)%>'
       
            usemap="#map1"border="0">
       
        <map name="map1"><%=imageMap1%></map>
       
        </body>
       
        </html>