C1Chart for WPF轴:多轴的鼠标提示数据点信息

ToolTip显示鼠标所在位置的日期信息这篇文章中,我们了解到使用标记来作为展示提示信息的容器。

在这个基础上,给C1Chart添加多轴(如何添加多轴,请参考文章:多轴图表),并且多个轴的范围(最小值和最大值)并不相同。这个时候由于Label标记依附于第一个Y轴,导致其他多轴的数据展示会不正确。

如何解决这个问题呢?本文我们就来介绍另一种添加ToolTip的方式:通过Series系列的PlotElementLoaded事件,然后使用ToolTipService来给多轴展示信息。

 

多轴

首先按照多轴图表文章所描述,给图表添加多轴。

代码参考:

<c1chart:C1Chart.View>
                <c1chart:ChartView>
                    <c1chart:ChartView.AxisY  >
                        <c1chart:Axis >
                            <c1chart:Axis.Title>
                                <TextBlock TextAlignment="Center" FontSize="20" Foreground="Wheat">ay1</TextBlock>
                            </c1chart:Axis.Title>
                        </c1chart:Axis></c1chart:ChartView.AxisY>
                    <c1chart:Axis Name="ay2" AutoMin="False" Min="5"  Position="Far">
                        <c1chart:Axis.Title>
                            <TextBlock TextAlignment="Center" FontSize="20" Foreground="Green">ay2</TextBlock>
                        </c1chart:Axis.Title>
                    </c1chart:Axis>
                </c1chart:ChartView>                    
            </c1chart:C1Chart.View>

数据

给图表添加两个不同的序列,分别依附不同的轴。序列一依附第一个轴,序列二依附第二个轴。

并且在DataSeries中调用PlotElementLoaded事件,用来设置ToolTip。

代码参考:

<c1chart:C1Chart.Data>
                <c1chart:ChartData>
                    <c1chart:DataSeries Values="1 2 3 5 6" Label="ay1"  PlotElementLoaded="DataSeries_PlotElementLoaded"/>
                    <c1chart:DataSeries AxisY="ay2" Label="ay2" Values="5 6 7 8 9" PlotElementLoaded="DataSeries_PlotElementLoaded"/>
                </c1chart:ChartData>
            </c1chart:C1Chart.Data>

设置ToolTip

咋iPlotElement事件里,可以根据PlotElement拿到DataPoint,因此可以获取到对应的X和Y值,然后通过ToolTipService将该值展示出来。

代码参考:

private void DataSeries_PlotElementLoaded(object sender, EventArgs e)
        {
            var pe = (PlotElement)sender;
            if (pe.DataPoint.PointIndex >= 0)
            {
                object value = "x:"+pe.DataPoint.PointIndex+"\r\n"+"value:" + pe.DataPoint.Value;
                ToolTipService.SetToolTip(pe, value);
                ToolTipService.SetPlacement(pe, System.Windows.Controls.Primitives.PlacementMode.MousePoint);
            }
        }

效果展示:

示例参考:

 ChartWPF_MultAxis_Tooltip.zip (8.90 kb)

 


更多资源

C1Chart的在线英文产品文档地址: 

http://helpcentral.componentone.com/nethelp/c1wpfchart/#!Documents/componentonechartforwpf.htm

 

如果你对C1Chart感兴趣,请到我们的官网下载最新版本:/developer/componentone-winform/controls/chart

如果你有疑问,可以到GCDN论坛获得技术支持:http://gcdn.grapecity.com.cn/showforum-68.html

 

另外,更多信息,欢迎阅读《C1Chart for WPF初级教程》系列文章

初遇。Getting Started(上)

初遇。Getting Started(下)

类型。穿Prada的女王(上)

类型。穿Prada的女王(下)

数据。和数据源相关的那些事(一)

数据。和数据源相关的那些事(二)

数据。和数据源相关的那些事(三)

数据。和数据源相关的那些事(四)

标记和标签。撕名牌大战(一)

标记和标签。撕名牌大战(二)

标记和标签。撕名牌大战(三)

导出(PDF,EXCEL) 

多轴图表 

轴的动态绑定

实现轴注释的高级自定义

颜色和大小。数据点的自定义(一)

符号。数据点的自定义(二)

基础介绍。XAML动画(一)

基础介绍。XAML动画(二)

基础介绍。XAML动画(三)

基础介绍。XAML动画(四)