这个例子演示了各种方法来表现缺失的数据点,这也表明在绘图区的ChartDirector会自动调整大小以适合图表。如下图所示:
在ChartDirector中,一系列的数据可能会存在丢失的情况,多使用NoValue来预定义常量。在一个线层里,在默认的情况下面,缺失值表示在该行的差距。换句话说,就是该线路将被打断。LineLayer.setGapColor被用来配置的线层加入通过NoValue点,使用的线段可以是具有不同的颜色或风格。
这个例子中,三个数据系列都包含NoValue点。红线表示了使用差距的默认行为来表现NoValue点。绿线演示了如何使用虚线加入通过NoValue点。橙色线表明使用具有相同的线条样式来参加正常的数据点加入通过NoValue点。
在整个图表配置完成之后呢,XYChart.packPlotArea方法将会被用来适应在给定的边界框力的小区面积和轴。
所使用的源代码如下:
[ASP.NET - VB Version]
<%@ Page Language="VB" Debug="true" %>
<%@ Import Namespace="ChartDirector" %>
<%@ Register TagPrefix="chart" Namespace="ChartDirector" Assembly="netchartdir" %>
<script runat="server">
'
' Page Load event handler
'
Protected Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)
' The data for the chart
Dim data0() As Double = {42, 49, Chart.NoValue, 38, 64, 56, 29, 41, 44, 57}
Dim data1() As Double = {65, 75, 47, 34, 42, 49, 73, Chart.NoValue, 90, 69, 66, _
78}
Dim data2() As Double = {Chart.NoValue, Chart.NoValue, 25, 28, 38, 20, 22, _
Chart.NoValue, 25, 33, 30, 24}
Dim labels() As String = {"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", _
"Aug", "Sep", "Oct", "Nov", "Dec"}
' Create a XYChart object of size 600 x 360 pixels. Set background color to
' brushed silver, with a 2 pixel 3D border. Use rounded corners.
Dim c As XYChart = New XYChart(600, 360, Chart.brushedSilverColor(), _
Chart.Transparent, 2)
c.setRoundedFrame()
' Add a title using 18 pts Times New Roman Bold Italic font. #Set top/bottom
' margins to 6 pixels.
Dim title As ChartDirector.TextBox = c.addTitle("Product Line Global Revenue", _
"Times New Roman Bold Italic", 18)
title.setMargin2(0, 0, 6, 6)
' Add a separator line just under the title
c.addLine(10, title.getHeight(), c.getWidth() - 11, title.getHeight(), _
Chart.LineColor)
' Add a legend box where the top-center is anchored to the horizontal center of
' the chart, just under the title. Use horizontal layout and 10 points Arial Bold
' font, and transparent background and border.
Dim legendBox As LegendBox = c.addLegend(c.getWidth() / 2, title.getHeight(), _
False, "Arial Bold", 10)
legendBox.setAlignment(Chart.TopCenter)
legendBox.setChart.Transparent, Chart.Transparent)
' Tentatively set the plotarea at (70, 75) and of 460 x 240 pixels in size. Use
' transparent border and black (000000) grid lines
c.setPlotArea(70, 75, 460, 240, -1, -1, Chart.Transparent, &H000000, -1)
' Set the x axis labels
c.xAxis().setLabels(labels)
' Show the same scale on the left and right y-axes
c.syncYAxis()
' Set y-axis tick density to 30 pixels. ChartDirector auto-scaling will use this
' as the guideline when putting ticks on the y-axis.
c.yAxis().setTickDensity(30)
' Set all axes to transparent
c.xAxis().setColors(Chart.Transparent)
c.yAxis().setColors(Chart.Transparent)
c.yAxis2().setColors(Chart.Transparent)
' Set the x-axis margins to 15 pixels, so that the horizontal grid lines can
' extend beyond the leftmost and rightmost vertical grid lines
c.xAxis().setMargin(15, 15)
' Set axis label style to 8pts Arial Bold
c.xAxis().setLabelStyle("Arial Bold", 8)
c.yAxis().setLabelStyle("Arial Bold", 8)
c.yAxis2().setLabelStyle("Arial Bold", 8)
' Add axis title using 10pts Arial Bold Italic font
c.yAxis().setTitle("Revenue in USD millions", "Arial Bold Italic", 10)
c.yAxis2().setTitle("Revenue in USD millions", "Arial Bold Italic", 10)
' Add the first line. The missing data will be represented as gaps in the line
' (the default behaviour)
Dim layer0 As LineLayer = c.addLineLayer2()
layer0.addDataSet(data0, &Hff0000, "Quantum Computer").setDataSymbol( _
Chart.GlassSphere2Shape, 11)
layer0.setLineWidth(3)
' Add the second line. The missing data will be represented by using dash lines
' to bridge the gap
Dim layer1 As LineLayer = c.addLineLayer2()
layer1.addDataSet(data1, &H00ff00, "Atom Synthesizer").setDataSymbol( _
Chart.GlassSphere2Shape, 11)
layer1.setLineWidth(3)
layer1.setGapColor(c.dashLineColor(&H00ff00))
' Add the third line. The missing data will be ignored - just join the gap with
' the original line style.
Dim layer2 As LineLayer = c.addLineLayer2()
layer2.addDataSet(data2, &Hff6600, "Proton Cannon").setDataSymbol( _
Chart.GlassSphere2Shape, 11)
layer2.setLineWidth(3)
layer2.setGapColor(Chart.SameAsMainColor)
' layout the legend so we can get the height of the legend box
c.layoutLegend()
' Adjust the plot area size, such that the bounding box (inclusive of axes) is 15
' pixels from the left edge, just under the legend box, 16 pixels from the right
' edge, and 25 pixels from the bottom edge.
c.packPlotArea(15, legendBox.getTopY() + legendBox.getHeight(), c.getWidth() - _
16, c.getHeight() - 25)
' Output the chart
WebChartViewer1.Image = c.makeWebImage(Chart.JPG)
' Include tool tip for the chart
WebChartViewer1.ImageMap = c.getHTMLImageMap("", "", _
"title='Revenue of {dataSetName} in {xLabel}: US$ {value}M'")
End Sub
</script>
<html>
<body>
<chart:WebChartViewer id="WebChartViewer1" runat="server" />
</body>
</html>
[ASP.NET - C# Version]
<%@ Page Language="C#" Debug="true" %> <%@ Import Namespace="ChartDirector" %> <%@ Register TagPrefix="chart" Namespace="ChartDirector" Assembly="netchartdir" %> <script runat="server"> // // Page Load event handler // protected void Page_Load(object sender, EventArgs e) { // The data for the chart double[] data0 = {42, 49, Chart.NoValue, 38, 64, 56, 29, 41, 44, 57}; double[] data1 = {65, 75, 47, 34, 42, 49, 73, Chart.NoValue, 90, 69, 66, 78}; double[] data2 = {Chart.NoValue, Chart.NoValue, 25, 28, 38, 20, 22, Chart.NoValue, 25, 33, 30, 24}; string[] labels = {"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"}; // Create a XYChart object of size 600 x 360 pixels. Set background color to // brushed silver, with a 2 pixel 3D border. Use rounded corners. XYChart c = new XYChart(600, 360, Chart.brushedSilverColor(), Chart.Transparent, 2); c.setRoundedFrame(); // Add a title using 18 pts Times New Roman Bold Italic font. #Set top/bottom // margins to 6 pixels. ChartDirector.TextBox title = c.addTitle("Product Line Global Revenue", "Times New Roman Bold Italic", 18); title.setMargin2(0, 0, 6, 6); // Add a separator line just under the title c.addLine(10, title.getHeight(), c.getWidth() - 11, title.getHeight(), Chart.LineColor); // Add a legend box where the top-center is anchored to the horizontal center of // the chart, just under the title. Use horizontal layout and 10 points Arial // Bold font, and transparent background and border. LegendBox legendBox = c.addLegend(c.getWidth() / 2, title.getHeight(), false, "Arial Bold", 10); legendBox.setAlignment(Chart.TopCenter); legendBox.setChart.Transparent, Chart.Transparent); // Tentatively set the plotarea at (70, 75) and of 460 x 240 pixels in size. Use // transparent border and black (000000) grid lines c.setPlotArea(70, 75, 460, 240, -1, -1, Chart.Transparent, 0x000000, -1); // Set the x axis labels c.xAxis().setLabels(labels); // Show the same scale on the left and right y-axes c.syncYAxis(); // Set y-axis tick density to 30 pixels. ChartDirector auto-scaling will use this // as the guideline when putting ticks on the y-axis. c.yAxis().setTickDensity(30); // Set all axes to transparent c.xAxis().setColors(Chart.Transparent); c.yAxis().setColors(Chart.Transparent); c.yAxis2().setColors(Chart.Transparent); // Set the x-axis margins to 15 pixels, so that the horizontal grid lines can // extend beyond the leftmost and rightmost vertical grid lines c.xAxis().setMargin(15, 15); // Set axis label style to 8pts Arial Bold c.xAxis().setLabelStyle("Arial Bold", 8); c.yAxis().setLabelStyle("Arial Bold", 8); c.yAxis2().setLabelStyle("Arial Bold", 8); // Add axis title using 10pts Arial Bold Italic font c.yAxis().setTitle("Revenue in USD millions", "Arial Bold Italic", 10); c.yAxis2().setTitle("Revenue in USD millions", "Arial Bold Italic", 10); // Add the first line. The missing data will be represented as gaps in the line // (the default behaviour) LineLayer layer0 = c.addLineLayer2(); layer0.addDataSet(data0, 0xff0000, "Quantum Computer").setDataSymbol( Chart.GlassSphere2Shape, 11); layer0.setLineWidth(3); // Add the second line. The missing data will be represented by using dash lines // to bridge the gap LineLayer layer1 = c.addLineLayer2(); layer1.addDataSet(data1, 0x00ff00, "Atom Synthesizer").setDataSymbol( Chart.GlassSphere2Shape, 11); layer1.setLineWidth(3); layer1.setGapColor(c.dashLineColor(0x00ff00)); // Add the third line. The missing data will be ignored - just join the gap with // the original line style. LineLayer layer2 = c.addLineLayer2(); layer2.addDataSet(data2, 0xff6600, "Proton Cannon").setDataSymbol( Chart.GlassSphere2Shape, 11); layer2.setLineWidth(3); layer2.setGapColor(Chart.SameAsMainColor); // layout the legend so we can get the height of the legend box c.layoutLegend(); // Adjust the plot area size, such that the bounding box (inclusive of axes) is // 15 pixels from the left edge, just under the legend box, 16 pixels from the // right edge, and 25 pixels from the bottom edge. c.packPlotArea(15, legendBox.getTopY() + legendBox.getHeight(), c.getWidth() - 16, c.getHeight() - 25); // Output the chart WebChartViewer1.Image = c.makeWebImage(Chart.JPG); // Include tool tip for the chart WebChartViewer1.ImageMap = c.getHTMLImageMap("", "", "title='Revenue of {dataSetName} in {xLabel}: US$ {value}M'"); } </script> <html> <body> <chart:WebChartViewer id="WebChartViewer1" runat="server" /> </body> </html>
参考资料:ChartDirector使用教程
转载于:https://blog.51cto.com/datavisual/1310329