對於圖表控件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;
}
}
}

