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.最终效果

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

相关推荐
code bean5 小时前
【WPF】WPF 自定义控件实战:从零打造一个可复用的 StatusIconTextButton (含避坑指南)
wpf·prism
拾忆,想起7 小时前
Redis红锁(RedLock)解密:分布式锁的高可用终极方案
java·数据库·redis·分布式·缓存·性能优化·wpf
FuckPatience15 小时前
WPF 程序用户权限模块利用MarkupExtension实现控制控件显示
wpf
Monkey-旭1 天前
鸿蒙 5.1 深度解析:ArkUI 4.1 升级与分布式开发新范式
分布式·wpf·harmonyos·arkts·openharmony·arkui
FuckPatience3 天前
WPF TabControl页面绑定ItemsSource
wpf
cplmlm4 天前
WPF+MVVM入门学习
c#·wpf
诸葛务农5 天前
人形机器人——电子皮肤技术路线:光学式电子皮肤及MIT基于光导纤维的分布式触觉传感电子皮肤
分布式·机器人·wpf
界面开发小八哥6 天前
界面控件DevExpress WPF中文教程:Data Grid - 绑定数据
ui·.net·wpf·界面控件·devexpress·ui开发
界面开发小八哥6 天前
图表组件SciChart WPF再升级:v8.9带来油气井图、新交互与可视化增强
信息可视化·wpf·数据可视化·scichart
创可贴治愈心灵7 天前
WPF中UI线程频繁操作造成卡顿的处理
ui·c#·wpf