图表控件ChartDirector使用教程：绘制Soft Bar Shading效果图表-控件新闻-慧都网

图表控件ChartDirector使用教程：绘制Soft Bar Shading效果图表

原创|其它|编辑：郝浩|2012-10-31 10:46:22.000|阅读 2607 次

概述：如何使用ChartDirector达到以下的效果，条形图主要使用的是柔光效果，在背景区域使用颜色渐变效果，此外还在轴标签之间放上了轴刻度。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接：

今天来看一下如何使用ChartDirector来绘制以下的图表效果：

如何使用ChartDirector绘制Soft Bar Shading效果图表

条形图主要使用的是柔光效果，在背景区域使用颜色渐变效果，此外还在轴标签之间放上了轴刻度。

柔光是一种特殊的阴影效果，看起来比较像梯度着色，而在此次的示例中，柔光效果被应用在了条形图上边。

我们来看一下制作的主要步骤：

通过使用 BaseChart.linearGradientColor 来定义渐变的颜色，然后使用 XYChart.setPlotArea 将它应用于绘图区配置渐变绘图区域背景。
XYChart.setPlotArea 还将设置了绘图区的边框和网格线的颜色为白色。
使用Chart.softLighting来定义条形图的柔光效果，然后用Layer.setBorderColor应用于条形图。
本次的例子中使用的刻度使用Axis.setTickOffset offsetted定义的是0.5 个单位，结果是它们不是与标签据中对齐，而是出于标签之间。

下面来看看使用来自顶部的柔光效果应用到多条形图的另外一个例子：

不同版本的源代码如下：

[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 bar chart
    Dim data() As Double = {450, 560, 630, 800, 1100, 1350, 1600, 1950, 2300, 2700}

    ' The labels for the bar chart
    Dim labels() As String = {"1996", "1997", "1998", "1999", "2000", "2001", _
        "2002", "2003", "2004", "2005"}

    ' Create a XYChart object of size 600 x 360 pixels
    Dim c As XYChart = New XYChart(600, 360)

    ' Add a title to the chart using 18pts Times Bold Italic font
    c.addTitle("Annual Revenue for Star Tech", "Times New Roman Bold Italic", 18)

    ' Set the plotarea at (60, 40) and of size 500 x 280 pixels. Use a vertical
    ' gradient color from light blue (eeeeff) to deep blue (0000cc) as background.
    ' Set border and grid lines to white (ffffff).
    c.setPlotArea(60, 40, 500, 280, c.linearGradientColor(60, 40, 60, 280, _
        &Heeeeff, &H0000cc), -1, &Hffffff, &Hffffff)

    ' Add a multi-color bar chart layer using the supplied data. Use soft lighting
    ' effect with light direction from left.
    c.addBarLayer3(data).setBorderColor(Chart.Transparent, Chart.softLighting( _
        Chart.Left))

    ' Set x axis labels using the given labels
    c.xAxis().setLabels(labels)

    ' Draw the ticks between label positions (instead of at label positions)
    c.xAxis().setTickOffset(0.5)

    ' Add a title to the y axis with 10pts Arial Bold font
    c.yAxis().setTitle("USD (millions)", "Arial Bold", 10)

    ' Set axis label style to 8pts Arial Bold
    c.xAxis().setLabelStyle("Arial Bold", 8)
    c.yAxis().setLabelStyle("Arial Bold", 8)

    ' Set axis line width to 2 pixels
    c.xAxis().setWidth(2)
    c.yAxis().setWidth(2)

    ' Output the chart
    WebChartViewer1.Image = c.makeWebImage(Chart.PNG)

    ' Include tool tip for the chart
    WebChartViewer1.ImageMap = c.getHTMLImageMap("", "", _
        "title='Year {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 bar chart
    double[] data = {450, 560, 630, 800, 1100, 1350, 1600, 1950, 2300, 2700};

    // The labels for the bar chart
    string[] labels = {"1996", "1997", "1998", "1999", "2000", "2001", "2002",
        "2003", "2004", "2005"};

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

    // Add a title to the chart using 18pts Times Bold Italic font
    c.addTitle("Annual Revenue for Star Tech", "Times New Roman Bold Italic", 18);

    // Set the plotarea at (60, 40) and of size 500 x 280 pixels. Use a vertical
    // gradient color from light blue (eeeeff) to deep blue (0000cc) as background.
    // Set border and grid lines to white (ffffff).
    c.setPlotArea(60, 40, 500, 280, c.linearGradientColor(60, 40, 60, 280, 0xeeeeff,
        0x0000cc), -1, 0xffffff, 0xffffff);

    // Add a multi-color bar chart layer using the supplied data. Use soft lighting
    // effect with light direction from left.
    c.addBarLayer3(data).setBorderColor(Chart.Transparent, Chart.softLighting(
        Chart.Left));

    // Set x axis labels using the given labels
    c.xAxis().setLabels(labels);

    // Draw the ticks between label positions (instead of at label positions)
    c.xAxis().setTickOffset(0.5);

    // Add a title to the y axis with 10pts Arial Bold font
    c.yAxis().setTitle("USD (millions)", "Arial Bold", 10);

    // Set axis label style to 8pts Arial Bold
    c.xAxis().setLabelStyle("Arial Bold", 8);
    c.yAxis().setLabelStyle("Arial Bold", 8);

    // Set axis line width to 2 pixels
    c.xAxis().setWidth(2);
    c.yAxis().setWidth(2);

    // Output the chart
    WebChartViewer1.Image = c.makeWebImage(Chart.PNG);

    // Include tool tip for the chart
    WebChartViewer1.ImageMap = c.getHTMLImageMap("", "",
        "title='Year {xLabel}: US$ {value}M'");
}

</script>
<html>
<body>
    <chart:WebChartViewer id="WebChartViewer1" runat="server" />
</body>
</html>

[Windows Forms - VB Version]

Imports System
Imports Microsoft.VisualBasic
Imports ChartDirector

Public Class softlightbar
    Implements DemoModule

    'Name of demo module
    Public Function getName() As String Implements DemoModule.getName
        Return "Soft Bar Shading"
    End Function

    'Number of charts produced in this demo module
    Public Function getNoOfCharts() As Integer Implements DemoModule.getNoOfCharts
        Return 1
    End Function

    'Main code for creating chart.
    'Note: the argument img is unused because this demo only has 1 chart.
    Public Sub createChart(viewer As WinChartViewer, img As String) _
        Implements DemoModule.createChart

        ' The data for the bar chart
        Dim data() As Double = {450, 560, 630, 800, 1100, 1350, 1600, 1950, 2300, _
            2700}

        ' The labels for the bar chart
        Dim labels() As String = {"1996", "1997", "1998", "1999", "2000", "2001", _
            "2002", "2003", "2004", "2005"}

        ' Create a XYChart object of size 600 x 360 pixels
        Dim c As XYChart = New XYChart(600, 360)

        ' Add a title to the chart using 18pts Times Bold Italic font
        c.addTitle("Annual Revenue for Star Tech", "Times New Roman Bold Italic", _
            18)

        ' Set the plotarea at (60, 40) and of size 500 x 280 pixels. Use a vertical
        ' gradient color from light blue (eeeeff) to deep blue (0000cc) as
        ' background. Set border and grid lines to white (ffffff).
        c.setPlotArea(60, 40, 500, 280, c.linearGradientColor(60, 40, 60, 280, _
            &Heeeeff, &H0000cc), -1, &Hffffff, &Hffffff)

        ' Add a multi-color bar chart layer using the supplied data. Use soft
        ' lighting effect with light direction from left.
        c.addBarLayer3(data).setBorderColor(Chart.Transparent, Chart.softLighting( _
            Chart.Left))

        ' Set x axis labels using the given labels
        c.xAxis().setLabels(labels)

        ' Draw the ticks between label positions (instead of at label positions)
        c.xAxis().setTickOffset(0.5)

        ' Add a title to the y axis with 10pts Arial Bold font
        c.yAxis().setTitle("USD (millions)", "Arial Bold", 10)

        ' Set axis label style to 8pts Arial Bold
        c.xAxis().setLabelStyle("Arial Bold", 8)
        c.yAxis().setLabelStyle("Arial Bold", 8)

        ' Set axis line width to 2 pixels
        c.xAxis().setWidth(2)
        c.yAxis().setWidth(2)

        ' Output the chart
        viewer.Chart = c

        'include tool tip for the chart
        viewer.ImageMap = c.getHTMLImageMap("clickable", "", _
            "title='Year {xLabel}: US$ {value}M'")

    End Sub

End Class

[Windows Forms - C# Version]

using System;
using ChartDirector;

namespace CSharpChartExplorer
{
    public class softlightbar : DemoModule
    {
        //Name of demo module
        public string getName() { return "Soft Bar Shading"; }

        //Number of charts produced in this demo module
        public int getNoOfCharts() { return 1; }

        //Main code for creating chart.
        //Note: the argument img is unused because this demo only has 1 chart.
        public void createChart(WinChartViewer viewer, string img)
        {
            // The data for the bar chart
            double[] data = {450, 560, 630, 800, 1100, 1350, 1600, 1950, 2300, 2700};

            // The labels for the bar chart
            string[] labels = {"1996", "1997", "1998", "1999", "2000", "2001",
                "2002", "2003", "2004", "2005"};

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

            // Add a title to the chart using 18pts Times Bold Italic font
            c.addTitle("Annual Revenue for Star Tech", "Times New Roman Bold Italic",
                18);

            // Set the plotarea at (60, 40) and of size 500 x 280 pixels. Use a
            // vertical gradient color from light blue (eeeeff) to deep blue (0000cc)
            // as background. Set border and grid lines to white (ffffff).
            c.setPlotArea(60, 40, 500, 280, c.linearGradientColor(60, 40, 60, 280,
                0xeeeeff, 0x0000cc), -1, 0xffffff, 0xffffff);

            // Add a multi-color bar chart layer using the supplied data. Use soft
            // lighting effect with light direction from left.
            c.addBarLayer3(data).setBorderColor(Chart.Transparent,
                Chart.softLighting(Chart.Left));

            // Set x axis labels using the given labels
            c.xAxis().setLabels(labels);

            // Draw the ticks between label positions (instead of at label positions)
            c.xAxis().setTickOffset(0.5);

            // Add a title to the y axis with 10pts Arial Bold font
            c.yAxis().setTitle("USD (millions)", "Arial Bold", 10);

            // Set axis label style to 8pts Arial Bold
            c.xAxis().setLabelStyle("Arial Bold", 8);
            c.yAxis().setLabelStyle("Arial Bold", 8);

            // Set axis line width to 2 pixels
            c.xAxis().setWidth(2);
            c.yAxis().setWidth(2);

            // Output the chart
            viewer.Chart = c;

            //include tool tip for the chart
            viewer.ImageMap = c.getHTMLImageMap("clickable", "",
                "title='Year {xLabel}: US$ {value}M'");
        }
    }
}

标签：

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

文章转载自：慧都科技

上一篇：使用Aspose.Words为整个文档改变页面设置下一篇：示例演示如何使用DevExpress XtraPivotGrid自定义组过滤器