文章出處

對于圖表控件C1Chart for WPF，我們在添加數據，選擇圖表類型這些基本可視化數據展示后，經常需要通過標題、坐標軸單位標簽等信息輔助說明圖表對實際場景的意義。C1Chart for WPF并沒有按照傳統WinForm的設計思想，直接暴露屬性接口來設置這些信息，而是使用WPF的設計思想實現這些功能的。

事實上，C1Chart for WPF完全支持這些自定義，而且更加靈活。

下面就給出這樣一個例子，用來展示如何使用C1Chart for WPF完成以上功能。

添加自定義標題

通過XAML代碼，在前臺<c1:C1Chart></c1:C1Chart>直接添加一個<TextBlock/>就可以完成設置，代碼如下：

        <c1:C1Chart HorizontalAlignment="Stretch" Margin="10,10,10,10" Name="c1Chart1" VerticalAlignment="Stretch">
            <c1:C1Chart.Data>
                <c1:ChartData ItemNames="企業1 企業2 企業3 企業4 企業5">
                    <c1:DataSeries Label="Series 1" RenderMode="Default" Values="20 22 19 24 25" />
                </c1:ChartData>
            </c1:C1Chart.Data>

            <c1:C1ChartLegend DockPanel.Dock="Right" />

            <TextBlock DockPanel.Dock="Top" Text="2013年度報表" HorizontalAlignment="Center"/>
        </c1:C1Chart>

自定義坐標軸單位標簽

自定義坐標軸標簽，通常用來表示坐軸數據的單位。同樣，通過XAML代碼，在前臺<c1:C1Chart></c1:C1Chart>直接添加一個<TextBlock/>就可以完成設置，代碼如下：

        <c1:C1Chart HorizontalAlignment="Stretch" Margin="10,10,10,10" Name="c1Chart1" VerticalAlignment="Stretch">
            <c1:C1Chart.Data>
                <c1:ChartData ItemNames="企業1 企業2 企業3 企業4 企業5">
                    <c1:DataSeries Label="Series 1" RenderMode="Default" Values="20 22 19 24 25" />
                </c1:ChartData>
            </c1:C1Chart.Data>
            
            <c1:C1ChartLegend DockPanel.Dock="Right" />
            
            <TextBlock DockPanel.Dock="Left" HorizontalAlignment="Left" VerticalAlignment="Center" Text="單位：萬元" Margin="0,100,-40,0">
                <TextBlock.RenderTransform>
                    <RotateTransform Angle="-90"/>
                </TextBlock.RenderTransform>
            </TextBlock>
        </c1:C1Chart>

旋轉坐標軸注釋

當坐標軸刻度間隔小于坐標軸注釋文字長度時，C1Chart會自動選取等間距，隱藏掉中間的一些注釋。當我們刻度過多，但是又不希望隱藏注釋時，就可以通過旋轉坐標軸注釋的角度，美觀的展示全部注釋的目的。這一點可以通過修改坐標軸角度完成，代碼如下：

this.c1Chart1.View.AxisX.AnnoAngle = 60;

完整示例代碼

以上幾點在實際應用中往往結合使用，這里給出完整的示例代碼：

前端XAML代碼：

<Window x:Class="C1WPFTest.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="300" Width="300" xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml">
    
    <Grid>
        <c1:C1Chart HorizontalAlignment="Stretch" Margin="10,10,10,10" Name="c1Chart1" VerticalAlignment="Stretch">
            <c1:C1Chart.Data>
                <c1:ChartData ItemNames="企業1 企業2 企業3 企業4 企業5">
                    <c1:DataSeries Label="Series 1" RenderMode="Default" Values="20 22 19 24 25" />
                </c1:ChartData>
            </c1:C1Chart.Data>
            
            <c1:C1ChartLegend DockPanel.Dock="Right" />
            
            <TextBlock DockPanel.Dock="Top" Text="2013年度報表" HorizontalAlignment="Center"/>
            
            <TextBlock DockPanel.Dock="Left" HorizontalAlignment="Left" VerticalAlignment="Center" Text="單位：萬元" Margin="0,100,-40,0">
                <TextBlock.RenderTransform>
                    <RotateTransform Angle="-90"/>
                </TextBlock.RenderTransform>
            </TextBlock>
        </c1:C1Chart>
        
    </Grid>
</Window>

后臺C#代碼：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace C1WPFTest
{
    /// <summary>
    /// Window1.xaml 的交互邏輯
    /// </summary>
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
            this.c1Chart1.View.AxisX.AnnoAngle = 60;
        }
    }
}