3.1 WPF画折线图、直方图、饼状图

本文看了博客WPF编程,Live Charts使用说明(2)------使用_func<chartpoint, string> labelpoint-CSDN博客,这里作为笔记用。

1.前端代码

前端XAML文件代码如下:

复制代码
<Window x:Class="livechart1.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"
        xmlns:local="clr-namespace:livechart1"
        xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="40"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Margin="10 0 0 0">
            <Button Width="80" Height="30" Margin="5 0 0 0" Content="折线图" Click="Button_Click"/>
            <Button Width="80" Height="30" Margin="5 0 0 0" Content="直方图" Click="Button_Click_1"/>
            <Button Width="80" Height="30" Margin="5 0 0 0" Content="饼状图" Click="Button_Click_2"/>
        </StackPanel>
        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <lvc:CartesianChart Name="s1" LegendLocation="Top">
                <lvc:CartesianChart.AxisY>
                    <lvc:Axis Name="s1y" Title="分数" MinValue="0"></lvc:Axis>
                </lvc:CartesianChart.AxisY>
                <lvc:CartesianChart.AxisX>
                    <lvc:Axis Name="s1x" Title="区域" ></lvc:Axis>
                </lvc:CartesianChart.AxisX>
            </lvc:CartesianChart>

            <lvc:CartesianChart Name="s2" Grid.Column="1" LegendLocation="Top">
                <lvc:CartesianChart.AxisX>
                    <lvc:Axis Name="s2y" Title="区域" ></lvc:Axis>
                </lvc:CartesianChart.AxisX>
                <lvc:CartesianChart.AxisY>
                    <lvc:Axis Name="s2x" Title="分数" MinValue="0"></lvc:Axis>
                </lvc:CartesianChart.AxisY>
            </lvc:CartesianChart>

            <lvc:PieChart Name="s3" LegendLocation="Top" Grid.Column="2"/>
        </Grid>

    </Grid>
</Window>

以上代码中,<Grid>上面的代码是自己生成的,里面有一行是我们加入的,这一行是:

复制代码
xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"

<Grid> ...</Grid>之间的所有代码复制到里面就行。

2.后端代码

在cs文件中的代码如下:

复制代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
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.Navigation;
using System.Windows.Shapes;
using LiveCharts;
using LiveCharts.Wpf;
using static System.Net.WebRequestMethods;

namespace livechart1
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        //1.折线图
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            SeriesCollection series = new SeriesCollection
            {
                new LineSeries
                {
                    Title = "深圳",
                    Values = new ChartValues<double> {4,6,5,2,7}
                },
                new LineSeries
                {
                    Title = "广州",
                    Values = new ChartValues<double> { 6, 7, 3, 4 ,6 }
                }
            };

            //x轴
            string[] Labels = new[] { "2011", "2012", "2013", "2014", "2015" };
            s1.Series = series;
            s1x.Labels = Labels;
            s1y.Separator.Step = 1;
            s1y.LabelFormatter = new Func<double, string>((value) =>
            {
                return value.ToString();
            });
        }

        //2.柱状图
        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            SeriesCollection SeriesCollection = new SeriesCollection
            {
                new ColumnSeries
                {
                    Title = "深圳",
                    Values = new ChartValues<double> { 10, 50, 39, 50 }
                },
                new ColumnSeries
                {
                    Title = "广州",
                    Values = new ChartValues<double> { 11, 56, 42 }
                }
            };
            string[] Labels = new[] { "2011", "2012", "2013", "2014", "2015" };
            s2.Series = SeriesCollection;
            s2x.Labels = Labels;
            s2y.Separator.Step = 1;
        }

        // 3.饼图
        private void Button_Click_2(object sender, RoutedEventArgs e)
        {
            SeriesCollection SeriesCollection = new SeriesCollection();
            SeriesCollection.Add(new PieSeries()
            {
                Title = "高一(1)班",
                Values = new ChartValues<int>() { 30 },
                DataLabels = true,
                LabelPoint = new Func<ChartPoint, string>((chartPoint) =>
                {
                    return string.Format("{0}{1} ({2:P})", chartPoint.SeriesView.Title, chartPoint.Y, chartPoint.Participation);
                })
            });
            SeriesCollection.Add(new PieSeries()
            {
                Title = "高一(2)班",
                Values = new ChartValues<int>() { 50 },
                DataLabels = true,
                LabelPoint = new Func<ChartPoint, string>((chartPoint) =>
                {
                    return string.Format("{0}{1} ({2:P})", chartPoint.SeriesView.Title, chartPoint.Y, chartPoint.Participation);
                })
            });
            SeriesCollection.Add(new PieSeries()
            {
                Title = "高一(3)班",
                Values = new ChartValues<int>() { 20 },
                DataLabels = true,
                LabelPoint = new Func<ChartPoint, string>((chartPoint) =>
                {
                    return string.Format("{0}{1} ({2:P})", chartPoint.SeriesView.Title, chartPoint.Y, chartPoint.Participation);
                })
            });
            
            s3.Series = SeriesCollection;
        }
    }
}

在以上代码中,头文件有LiveCharts,这个我们需要进入 工具--->NuNet 包管理器--->管理解决方案,进入后搜索LiveCharts,然后点击安装即可。

3.最终效果

最后运行代码,运行结果如下:

相关推荐
豫狮恒14 小时前
OpenHarmony Flutter 分布式多模态交互:融合音视频、手势与环境感知的跨端体验革新
flutter·wpf·openharmony
豫狮恒16 小时前
OpenHarmony Flutter 分布式数据共享实战:从基础存储到跨设备协同
flutter·wpf·openharmony
5008419 小时前
鸿蒙 Flutter 隐私合规:用户授权中心与数据审计日志
flutter·华为·开源·wpf·音视频
豫狮恒20 小时前
OpenHarmony Flutter 分布式软总线实战:跨设备通信的核心技术与应用
flutter·wpf·harmonyos
Hello.Reader20 小时前
Flink SQL 的 LIMIT 子句语义、坑点与实战技巧
sql·flink·wpf
豫狮恒21 小时前
OpenHarmony Flutter 分布式安全防护:跨设备身份认证与数据加密传输方案
flutter·wpf·openharmony
Wnq1007221 小时前
鸿蒙 OS 与 CORBA+DDS+QOS+SOA 在工业控制领域的核心技术对比研究
物联网·性能优化·wpf·代理模式·信号处理·harmonyos·嵌入式实时数据库
豫狮恒21 小时前
OpenHarmony Flutter 分布式设备发现与组网:跨设备无感连接与动态组网方案
分布式·flutter·wpf·openharmony
豫狮恒21 小时前
OpenHarmony Flutter 分布式边缘智能:跨设备算力协同与端侧 AI 推理优化方案
wpf
豫狮恒1 天前
OpenHarmony Flutter 分布式安全防护:跨设备身份认证与数据加密方案
分布式·安全·flutter·wpf·openharmony