WPF如何用Chart绘画出Y轴的左边数据

Question

WPF 如何绘画出下图这样的图形，，是需要同时显示 Y轴 的左边和右边的 曲线 有类似DEMO的可以追加费用

Answer 1

引自免费微信小程序：皆我百晓生

要绘制您描述的热态电阻温升曲线图（图1），您可以使用WPF中的Chart控件。这里是一个简单的示例，展示了如何在WPF应用程序中创建一个包含上下两个图表区域的窗口，并且每个区域都有一个独立的Chart控件。

步骤 1: 创建主窗体

首先，在您的项目中添加一个新的WPF应用项目。然后，打开项目，将窗体定义为<Window>标签，并确保它有一个合适的标题。

<Window x:Class="MyApplication.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
</Window>

步骤 2: 添加上下两列的数据

为了显示上下两个部分的数据，您需要创建一个Grid并将其放置在一个新的Canvas上。这样，您可以在其中添加两个Chart控件，并分别设置它们的X和Y轴。

示例代码

<Window x:Class="MyApplication.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="MainWindow"
        Height="350"
        Width="525">

    <Grid>
        <Canvas HorizontalAlignment="Left" VerticalAlignment="Top">
            <!-- 上半部分 -->
            <Canvas Grid.Row="0" HorizontalAlignment="Left" VerticalAlignment="Top">
                <!-- 第一列 -->
                <Canvas Grid.Column="0" Height="Auto">
                    <!-- 绘制热态电阻R2的数据 -->
                    <Chart x:Name="chart1" Grid.Row="0" Height="150" Width="Auto" Margin="0,0,0,10" >
                        <Chart.Series>
                            <Series Name="Series1">
                                <DataPoint x="1" y="1.3459"/>
                                <DataPoint x="2" y="1.3284"/>
                                <!-- 更多点... -->
                            </Series>
                        </Chart.Series>

                        <!-- 设置X轴标签和数值格式化器 -->
                        <Chart.Axis>
                            <Axis Name="XAxis" Minimum="-1" Maximum="12231" />
                            <Label Text="{Binding Path=X}" TextFormatString="{0:P0}°C" />
                        </Chart.Axis>

                        <!-- 设置Y轴标签和数值格式化器 -->
                        <Chart.Axis>
                            <Axis Name="YAxis" Minimum="-Infinity" Maximum="Infinity" />
                            <Label Text="{Binding Path=Y}" TextFormatString="{0:N0}" />
                        </Chart.Axis>
                    </Chart>
                </Canvas>

                <!-- 下半部分 -->
                <Canvas Grid.Column="1" Height="Auto">
                    <!-- 绘制热态电阻R2的数据 -->
                    <Chart x:Name="chart2" Grid.Row="0" Height="150" Width="Auto" Margin="0,0,0,10" >
                        <Chart.Series>
                            <Series Name="Series2">
                                <DataPoint x="1" y="1.3459"/>
                                <DataPoint x="2" y="1.3284"/>
                                <!-- 更多点... -->
                            </Series>
                        </Chart.Series>

                        <!-- 设置X轴标签和数值格式化器 -->
                        <Chart.Axis>
                            <Axis Name="XAxis" Minimum="-1" Maximum="12231" />
                            <Label Text="{Binding Path=X}" TextFormatString="{0:P0}°C" />
                        </Chart.Axis>

                        <!-- 设置Y轴标签和数值格式化器 -->
                        <Chart.Axis>
                            <Axis Name="YAxis" Minimum="-Infinity" Maximum="Infinity" />
                            <Label Text="{Binding Path=Y}" TextFormatString="{0:N0}" />
                        </Chart.Axis>
                    </Chart>
                </Canvas>
            </Canvas>

            <!-- 下部按钮区 -->
            <Button Content="显示更多" Click="ShowMorePoints_Click" />
        </Canvas>
    </Grid>
</Window>

步骤 3: 添加更多数据点

根据您的需求，可以在此基础上添加更多的数据点到各个Chart系列中。例如，如果您想增加更多的点，只需重复上述步骤并在适当的位置添加额外的DataPoint实例即可。

这个例子仅展示了一个基本的框架，实际应用可能需要更复杂的布局、样式和行为控制。如果有特定的需求或要求，请告诉我，我可以进一步提供详细的代码示例。