WinRTXAML 图表，顶部标签的控件样式，代码答案

【问题标题】：WinRTXAML chart, control style for top label, codeWinRTXAML 图表，顶部标签的控件样式，代码
【发布时间】：2017-01-29 22:30:29
【问题描述】：

我正在使用 WinRTXamlToolkit.Controls.DataVisualization.Charting.Chart 对象，其依赖轴整数为 0/1，时间轴独立。我想抑制或旋转图表顶部的标签。样式是在 Axis (chart.Axes) 还是系列 (LineSeries) 上找到的？我的图表完全是通过代码配置的，sn-ps如下：

编辑 1/30/2017-3：添加托管 XAML 页面。

<Page
    x:Class="HomeControl.Views.Historical"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:Charting="using:WinRTXamlToolkit.Controls.DataVisualization.Charting"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HomeControl.Views"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Charting:Chart x:Name="LineChart" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" VerticalAlignment="Top" Height="500">
        </Charting:Chart>
    </Grid>
</Page>

编辑 1/30/2017-2：添加剩余代码...

var lowDate = records.First().taken.DateTime;
var highDate = records.Last().taken.DateTime;

var allDeviceTelemetry = records.GroupBy(t => t.sensorid).OrderBy(g => g.Key);

var axisTaken = new DateTimeAxis()
    {
        Title = "Taken",
        Orientation = AxisOrientation.X,
        IntervalType = DateTimeIntervalType.Minutes,
        Interval = 5,
        Minimum = lowDate,
        Maximum = highDate,
};
LineChart.Axes.Add(axisTaken);

LineChart.Axes.Add(new LinearAxis()
{
    Title = "State",
    Orientation = AxisOrientation.Y
});

foreach (var deviceTelemetry in allDeviceTelemetry)
{
    var series = new LineSeries()
    {
        Title = deviceTelemetry.Key, // sensorid
        IndependentValuePath = "taken",
        DependentValuePath = "sensorvalueint",
        ItemsSource = deviceTelemetry
    };
    LineChart.Series.Add(series);
}

我要控制的区域是绿色的：

我玩过其他一些样式，例如区间和轴标题，我就是不知道数据点标签样式在哪里？

编辑 2017 年 1 月 30 日：这是树，突出显示的对象（底部的 TextBlock）。我需要弄清楚如何通过代码来设置这个“AxisLabel”、“Panel”、“AxisGrid”或“CategoryAxis”的样式。

任何提示将不胜感激！

-约翰

【问题讨论】：

您必须设置DateTimeAxis 的AxisLabelStyle 属性。但请记住：这是 XAML 工具包，您应该在...好吧，XAML...
感谢 jstreet，但不幸的是，这是我尝试的第一种样式（AxisLabelStyle），并且只影响了 BOTTOM（轴、8:15、8:20 等）标签，而不是顶部。
您是否将样式分配给顶轴？
嗨 jstreet。我编辑了我的帖子，添加了一个可视化树。我认为设置顶轴样式是我的问题的精神，你对如何以编程方式做到这一点有任何指导吗？
鉴于您提到顶轴对您来说是意外，我想您可能想找到一种方法来删除它，而不是设置它的样式。但无论如何，您都应该发布生成该图表的完整代码。人们可以自己获取可视化树的图片，但无法获取您的代码。最后，如果您还没有这样做，请阅读MCVE。

标签： xaml charts uwp uwp-xaml winrt-xaml-toolkit

【解决方案1】：

不是一个完整的答案，因为我不知道您是如何制作标签以显示在顶部的，但在我看来，它们更像是数据点标签而不是轴标签。运行该工具包的示例应用程序可能会帮助您稍微浏览 UI 树并使探索事物变得更容易。只需在 VS 中获取工具包的源代码，按 F5，打开图表控件示例，然后在指向标签的同时按 Ctrl+Shift。这是我在指向类别轴时得到的结果：

我会浏览数据点、系列并搜索一个名为 style 的属性。否则 - 浏览源代码以了解它是如何设置的。

【讨论】：

感谢 Filip，是的，我已经为我的输出研究了可视化树，我已经编辑了原始帖子以包含它以供您参考。我需要有关如何通过 code 设置 CategoryAxis>AxisGrid>Panel>AxisLabel>TextBlock 样式的指导。 CategoryAxis 出乎我的意料，我没有明确添加它。
好吧，我看到你在那里添加了一个 DateTimeAxis，我想这不会删除已经存在的 CategoryAxis。我必须同意 jstreet 关于MVCE 的看法。尝试创建尽可能少的代码文件集，以便在添加到新应用项目时重现您的问题。

【解决方案2】：

我已经解决了我的问题，但没有达到我预期的结果 - 好多了。

经过相当多的实验，我了解了一些关于 WinRTXAML 图表的知识；这些观察纯粹是从编码的角度来看的，因为我没有在我的页面中使用静态 XAML。我是新来的控件，所以如果有人知道这些学习不完整或被误导，请插话：

轴是根据添加的系列动态创建的，如果未预定义适当的 Axis（在 Axes 属性中）。这在数据绑定发生之前不会创建轴（可以理解，因为图表需要反映数据类型的传入数据）。
将系列显式分配给轴是通过 IndependentAxis 和 DependentRangeAxis 实现的系列对象。如果省略，将进行赋值隐式基于系列绑定值的数据类型。相反，如果一个轴显式分配给一个系列，则不需要添加到图表上的 Axes 属性（但也可以）。
如果一个轴显式分配给与该系列的数据类型，一个可怕的误导性例外是生成。 “分配的独立轴无法使用。这可能是由于到轴的未设置方向属性。”
类别轴是为一系列字符串类型的值自动生成，但也当数据类型与现有轴不匹配时。（即数据类型转换为字符串，然后生成/使用 CategoryAxis）

将这些知识应用到我最初的问题中，这就是发生的事情。虽然我预定义了 DateTime 轴，但独立轴的传入数据类型是 DateTimeOffset。该值被解释为字符串值，因为它不是 DateTime（即没有隐式转换）。这导致图表生成一个 CategoryAxis，将其分配给系列，并将其放置在图表的顶部。不明白这是怎么回事，我不想要这个顶部轴上的标签，所以我试图压制它们，但我找不到轴，因为它是在数据绑定发生之后才创建的。

解决方案：将“采用”值数据类型设为 DateTime，这会导致图表 [显式或隐式] 与 DateTimeAxis 对齐。优化：将轴直接分配给系列，不用费心将它们添加到 Chart.Axes 属性中。

感谢@jstreet 和@FilipSkakun 抽出宝贵时间查看此内容，感谢您的关注和耐心。

-约翰

【讨论】：