有关 WPF LiveCharts HeatSeries 的一些格式问题

Question

我使用 LiveCharts 的

HeatSeries

控件在我的 WPF 应用程序中创建气候图表（使用 MVVM / Caliburn.Micro）。该图表填充在我的 ViewModel 中，它按预期工作，但我遇到了一些格式问题，我似乎无法解决，并且 AI 及其文档都没有帮助。我在下面的屏幕截图中突出显示了这些问题。

1. 如何更改轴标签的字体大小？
2. 图表右侧有一个巨大的空白区域。下一个网格列从“Hello”开始。如何解决这个问题？
3. 无论边距、行高和图表高度如何，x 轴标签的下部都会被切除。
4. 如何摆脱颜色图例？

XAML：

<lvc:CartesianChart Series="{Binding HeatMapSeries}" Grid.Column="1" Grid.Row="1" Margin="10" LegendLocation="None">
    <lvc:CartesianChart.AxisX>
        <lvc:Axis LabelFormatter="{Binding XAxisLabelFormatter}" >
            <lvc:Axis.Separator>
                <lvc:Separator Step="1" />
            </lvc:Axis.Separator>
        </lvc:Axis>
    </lvc:CartesianChart.AxisX>
    <lvc:CartesianChart.AxisY>
        <lvc:Axis Labels="{Binding YAxisLabels}"/>
    </lvc:CartesianChart.AxisY>
</lvc:CartesianChart>   

Answer 1

您只需在标签本身中添加字体大小、粗细等属性即可设置轴标签的格式：

例如：

<lvc:Axis Labels="{Binding SalesMan}" LabelsRotation="-15" FontSize="18" FontWeight="Bold">

我不确定是否有办法显式删除渐变图例。我可以通过设置

Margin="0,0,-17,0"

来解决此问题，其中 17 是我想要剪辑的空间。这有点hacky，但确实有效。如果我找到另一种方法，我会相应地更新答案，但就目前而言，它似乎是内置的。

<lvc:CartesianChart Series="{Binding HeatMapSeries}" Margin="0,0,-17,0" Padding="10" Grid.Column="1" Grid.Row="1" LegendLocation="None">

对于您的格式问题（额外的空间和剪辑），您的网格布局可能有问题。尝试摆脱图表并使用一些

Border

控件来了解事物的布局可能是个好主意。

为了帮助您开始使用，这里有一个布局正常工作的工作示例，它大量借鉴了 LiveCharts 示例代码：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
        <RowDefinition Height="Auto"></RowDefinition>
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>

    <Button Grid.Row="0" Click="ButtonBase_OnClick" Margin="10">Randomize</Button>
    <lvc:CartesianChart Grid.Row="1" DataTooltip="{x:Null}" LegendLocation="None" Margin="0,0,-17,0">
        <lvc:CartesianChart.Series>
            <lvc:HeatSeries Values="{Binding Values}" DataLabels="True" />
        </lvc:CartesianChart.Series>
        <lvc:CartesianChart.AxisX>
            <lvc:Axis Labels="{Binding SalesMan}" LabelsRotation="-45" FontSize="18" FontWeight="Bold">
                <lvc:Axis.Separator>
                    <lvc:Separator Step="1"></lvc:Separator>
                </lvc:Axis.Separator>
            </lvc:Axis>
        </lvc:CartesianChart.AxisX>
        <lvc:CartesianChart.AxisY>
            <lvc:Axis Labels="{Binding Days}" FontSize="18"></lvc:Axis>
        </lvc:CartesianChart.AxisY>
    </lvc:CartesianChart>

    <TextBlock Text="Hello" Grid.Column="1" Grid.Row="1" Background="White" />

    <TextBlock Text="More stuff down here...." Grid.ColumnSpan="2" Grid.Row="2" />
</Grid>