97操操,日韩高清无码片,A级网站免费看

圖表控件ChartDirector使用教程：繪制Soft Bar Shading效果圖表

原創|其它|編輯：郝浩|2012-10-31 10:46:22.000|閱讀 2649 次

概述：如何使用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@fc6vip.cn

文章轉載自：慧都科技

上一篇：使用Aspose.Words為整個文檔改變頁面設置下一篇：示例演示如何使用DevExpress XtraPivotGrid自定義組過濾器