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

最后运行代码，运行结果如下：