如何利用ChartDirector构建轮廓和颜色连续的图表-控件新闻-慧都网

如何利用ChartDirector构建轮廓和颜色连续的图表

原创|其它|编辑：郝浩|2012-12-07 13:28:25.000|阅读 572 次

概述：本文主要通过几个步骤简单介绍如何利用ChartDirector构建轮廓和颜色连续的图表。

ChartDirector控件拥有丰富的图表图形组件库，而且使用方便，快捷。如果想要利用ChartDirector构建如下所示的轮廓连续图表，可以参考以下的步骤：

添加XYChart.addContourLayer添加轮廓层。
默认情况下，网格线绘制在绘图区的背景，所以会在所有图表层的背后，在这个例子中就使用的PlotArea.moveGridBefore来移动网格线到轮廓层的前面。
使用ContourLayer.setColorAxis将颜色轴放在右侧使用。

代码如下：

<%@page import="ChartDirector.*" %>
<%
// The x and y coordinates of the grid
double[] dataX = {-10, -9, -8, -7, -6, -5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8,
    9, 10};
double[] dataY = {-10, -9, -8, -7, -6, -5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8,
    9, 10};

// The values at the grid points. In this example, we will compute the values using
// the formula z = x * sin(y) + y * sin(x).
double[] dataZ = new double[(dataX.length) * (dataY.length)];
for (int yIndex = 0; yIndex < dataY.length; ++yIndex) {
    double y = dataY[yIndex];
    for (int xIndex = 0; xIndex < dataX.length; ++xIndex) {
        double x = dataX[xIndex];
        dataZ[yIndex * (dataX.length) + xIndex] = x * Math.sin(y) + y * Math.sin(x);
    }
}

// Create a XYChart object of size 600 x 500 pixels
XYChart c = new XYChart(600, 500);

// Add a title to the chart using 15 points Arial Bold Italic font
c.addTitle("z = x * sin(y) + y * sin(x)      ", "Arial Bold Italic", 15);

// Set the plotarea at (75, 40) and of size 400 x 400 pixels. Use semi-transparent
// black (80000000) dotted lines for both horizontal and vertical grid lines
c.setPlotArea(75, 40, 400, 400, -1, -1, -1, c.dashLineColor(0x80000000, Chart.DotLine
    ), -1);

// Set x-axis and y-axis title using 12 points Arial Bold Italic font
c.xAxis().setTitle("X-Axis Title Place Holder", "Arial Bold Italic", 12);
c.yAxis().setTitle("Y-Axis Title Place Holder", "Arial Bold Italic", 12);

// Set x-axis and y-axis labels to use Arial Bold font
c.xAxis().setLabelStyle("Arial Bold");
c.yAxis().setLabelStyle("Arial Bold");

// When auto-scaling, use tick spacing of 40 pixels as a guideline
c.yAxis().setTickDensity(40);
c.xAxis().setTickDensity(40);

// Add a contour layer using the given data
ContourLayer layer = c.addContourLayer(dataX, dataY, dataZ);

// Move the grid lines in front of the contour layer
c.getPlotArea().moveGridBefore(layer);

// Add a color axis (the legend) in which the top left corner is anchored at (505,
// 40). Set the length to 400 pixels and the labels on the right side.
ColorAxis cAxis = layer.setColorAxis(505, 40, Chart.TopLeft, 400, Chart.Right);

// Add a title to the color axis using 12 points Arial Bold Italic font
cAxis.setTitle("Color Legend Title Place Holder", "Arial Bold Italic", 12);

// Set color axis labels to use Arial Bold font
cAxis.setLabelStyle("Arial Bold");

// Output the chart
String chart1URL = c.makeSession(request, "chart1");
%>
<html>
<body style="margin:5px 0px 0px 5px">
<div style="font-size:18pt; font-family:verdana; font-weight:bold">
    Contour Chart
</div>
<hr color="#000080">
<div style="font-size:10pt; font-family:verdana; margin-bottom:1.5em">
    <a href="viewsource.jsp?file=<%=request.getServletPath()%>">View Source Code</a>
</div>
<img src='<%=response.encodeURL("getchart.jsp?"+chart1URL)%>'>
</body>
</html>

在看完了如何创建连续的轮廓图表之后，接下来就是连续的着色，如下所示：

如何利用ChartDirector构建轮廓和颜色连续的图表

<%@page import="ChartDirector.*" %>
<%
// The x and y coordinates of the grid
double[] dataX = {-10, -9, -8, -7, -6, -5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8,
    9, 10};
double[] dataY = {-10, -9, -8, -7, -6, -5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8,
    9, 10};

// The values at the grid points. In this example, we will compute the values using
// the formula z = Sin(x / 2) * Sin(y / 2).
double[] dataZ = new double[(dataX.length) * (dataY.length)];
for (int yIndex = 0; yIndex < dataY.length; ++yIndex) {
    double y = dataY[yIndex];
    for (int xIndex = 0; xIndex < dataX.length; ++xIndex) {
        double x = dataX[xIndex];
        dataZ[yIndex * (dataX.length) + xIndex] = Math.sin(x / 2.0) * Math.sin(y /
            2.0);
    }
}

// Create a XYChart object of size 600 x 500 pixels
XYChart c = new XYChart(600, 500);

// Add a title to the chart using 18 points Times New Roman Bold Italic font
c.addTitle("Nano Lattice Twister Field Intensity        ",
    "Times New Roman Bold Italic", 18);

// Set the plotarea at (75, 40) and of size 400 x 400 pixels. Use semi-transparent
// black (80000000) dotted lines for both horizontal and vertical grid lines
c.setPlotArea(75, 40, 400, 400, -1, -1, -1, c.dashLineColor(0x80000000, Chart.DotLine
    ), -1);

// Set x-axis and y-axis title using 12 points Arial Bold Italic font
c.xAxis().setTitle("Lattice X Direction (nm)", "Arial Bold Italic", 12);
c.yAxis().setTitle("Lattice Y Direction (nm)", "Arial Bold Italic", 12);

// Set x-axis and y-axis labels to use Arial Bold font
c.xAxis().setLabelStyle("Arial Bold");
c.yAxis().setLabelStyle("Arial Bold");

// When auto-scaling, use tick spacing of 40 pixels as a guideline
c.yAxis().setTickDensity(40);
c.xAxis().setTickDensity(40);

// Add a contour layer using the given data
ContourLayer layer = c.addContourLayer(dataX, dataY, dataZ);

// Set the contour color to transparent
layer.setContourColor(Chart.Transparent);

// Move the grid lines in front of the contour layer
c.getPlotArea().moveGridBefore(layer);

// Add a color axis (the legend) in which the left center point is anchored at (495,
// 240). Set the length to 370 pixels and the labels on the right side.
ColorAxis cAxis = layer.setColorAxis(495, 240, Chart.Left, 370, Chart.Right);

// Add a bounding box to the color axis using light grey (eeeeee) as the background
// and dark grey (444444) as the border.
cAxis.setBoundingBox(0xeeeeee, 0x444444);

// Add a title to the color axis using 12 points Arial Bold Italic font
cAxis.setTitle("Twist Pressure (Twist-Volt)", "Arial Bold Italic", 12);

// Set color axis labels to use Arial Bold font
cAxis.setLabelStyle("Arial Bold");

// Use smooth gradient coloring
cAxis.setColorGradient(true);

// Output the chart
String chart1URL = c.makeSession(request, "chart1", Chart.JPG);
%>
<html>
<body style="margin:5px 0px 0px 5px">
<div style="font-size:18pt; font-family:verdana; font-weight:bold">
    Continuous Contour Coloring
</div>
<hr color="#000080">
<div style="font-size:10pt; font-family:verdana; margin-bottom:1.5em">
    <a href="viewsource.jsp?file=<%=request.getServletPath()%>">View Source Code</a>
</div>
<img src='<%=response.encodeURL("getchart.jsp?"+chart1URL)%>'>
</body>
</html>

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@ke049m.cn

文章转载自：慧都控件

上一篇：NMath应用教程：在财务投资与预测中的应用下一篇：GdPicture.NET使用教程：如何为PDF添加水印