为C1Chart for WPF添加自定义标题、坐标轴单位标签以及旋转坐标轴注释

对于图表控件C1Chart for WPF,我们在添加数据,选择图表类型这些基本可视化数据展示后,经常需要通过标题、坐标轴单位标签等信息辅助说明图表对实际场景的意义。C1Chart for WPF并没有按照传统WinForm的设计思想,直接暴露属性接口来设置这些信息,而是使用WPF的设计思想实现这些功能的。<p><a href="http://www.grapecity.com.cn/image.ashx?picture=image_168.png"><img style="display: inline; border: 0px; width:200px; height:180px" title="image" src="http://www.grapecity.com.cn/image.ashx?picture=image_thumb_168.png" alt="image" width="491" height="418" border="0" /></a></p>

发布于 2013/07/23 00:00

ComponentOne Enterprise

对于图表控件C1Chart for WPF,我们在添加数据,选择图表类型这些基本可视化数据展示后,经常需要通过标题、坐标轴单位标签等信息辅助说明图表对实际场景的意义。C1Chart for WPF并没有按照传统WinForm的设计思想,直接暴露属性接口来设置这些信息,而是使用WPF的设计思想实现这些功能的。

 

事实上,C1Chart for WPF完全支持这些自定义,而且更加灵活。

image

下面就给出这样一个例子,用来展示如何使用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;
        }
    }
}

 

源码下载

C1WPFTest_ChartTitle.rar (7.86 kb)

关于葡萄城

葡萄城是专业的软件开发技术和低代码平台提供商,以“赋能开发者”为使命,致力于通过表格控件、低代码和BI等各类软件开发工具和服务,一站式满足开发者需求,帮助企业提升开发效率并创新开发模式。葡萄城开发技术始于1980年,40余年来始终聚焦软件开发技术,有深厚的技术积累和丰富的产品线。是业界能够同时赋能软件开发和低代码开发的企业。凭借过硬的产品能力、活跃的用户社区和丰富的伙伴生态,与超过3000家合作伙伴紧密合作,产品广泛应用于信息和软件服务、制造、交通运输、建筑、金融、能源、教育、公共管理等支柱产业。

相关产品
推荐相关案例
关注微信
葡萄城社区二维码

关注“葡萄城社区”

加微信获取技术资讯

加微信获取技术资讯

想了解更多信息,请联系我们, 随时掌握技术资源和产品动态