首页 > 其他分享 >wpf + LiveCharts.wpf 做个漂亮的图表

wpf + LiveCharts.wpf 做个漂亮的图表

时间:2023-12-22 17:45:27浏览次数:31  
标签:ChartValues 12 get 图表 set using wpf public LiveCharts

十年河东,十年河西,莫欺少年穷

学无止境,精益求精

参考:WPF LiveChart 图表详解

接着上一篇博客: wpf + MaterialDesign + Prism8 实现导航功能

 1、项目引入图表包

 2、定义用户控件 IndexView 的 IndexViewModel,如下

using LiveCharts;
using Prism.Mvvm;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Text;

namespace WpfApp.ViewModels
{
    public class IndexViewModel : BindableBase
    {
        private ChartValues<int> dataXCenters;

        public ChartValues<int> DataXCenters
        {
            get { return dataXCenters; }
            set { dataXCenters = value; RaisePropertyChanged(); }
        }

        /// <summary>
        /// 
        /// </summary>
        private ChartValues<int> dataYCenters;

        public ChartValues<int> DataYCenters
        {
            get { return dataYCenters; }
            set { dataYCenters = value; RaisePropertyChanged(); }
        }

        private ObservableCollection<IndexXamlModel> indexData;

        public ObservableCollection<IndexXamlModel> IndexData
        {
            get { return indexData; }
            set { indexData = value; RaisePropertyChanged(); }
        }




        public IndexViewModel()
        {
            DataXCenters = new ChartValues<int>() { 1, 2, 3, 4, 5, 6, 2, 3, 2, 2, 3, 4, 6, 2, 3, 4, 1, 2, 3, 4, 5, 6, 2, 3, 2, 2, 3, 4, 6, 2, 3, 4 };
            DataYCenters = new ChartValues<int>() { 2, 4, 6, 8, 10, 12, 18, 19, 16, 12, 13, 14, 18, 10, 12, 12, 2, 4, 6, 8, 10, 12, 18, 19, 16, 12, 13, 14, 18, 10, 12, 12 };

            // 
            IndexData = new ObservableCollection<IndexXamlModel>();
            for (int i = 0; i < 10; i++)
            {
                IndexData.Add(new IndexXamlModel() { count = (i + 1) * 3, title = (i + 1) + "级传销商" });
            }
        }
    }
    public class IndexXamlModel
    {
        public string title { get; set; }
        public int count { get; set; }
    }
}
View Code

3、IndexView.Xaml 如下

<UserControl x:Class="chengxiangSite.UserControls.IndexView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:chengxiangSite.UserControls" xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <ItemsControl Grid.Row="0" ItemsSource="{Binding IndexData}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Columns="10"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Border BorderBrush="#ccc" BorderThickness="0,0,1,0" Margin="5,8" Height="70" Background="#fafafa"  >
                        <Grid  DockPanel.Dock="Right">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="auto" />
                                <RowDefinition Height="auto" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <TextBlock Text="{Binding count}" HorizontalAlignment="Center" Margin="0,9"  FontWeight="Bold" Foreground="#747474" FontSize="22"/>
                            <TextBlock Grid.Row="1" Text="{Binding title}" FontSize="12" HorizontalAlignment="Center" FontWeight="Light" Foreground="#747474"/>

                        </Grid>
                    </Border>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
        
        
        <lvc:CartesianChart Grid.Row="1" LegendLocation="Top" Margin="0,12">
            <lvc:CartesianChart.Series>
                <!--设置Series的类型为 Line 类型, 该类型提供了一些折线图的实现-->
                <lvc:LineSeries LineSmoothness="1" DataLabels="False" StrokeDashArray="1"  Title="payCount"  Values="{Binding DataXCenters}"/>
                <lvc:LineSeries LineSmoothness="1" DataLabels="False"   Title="totalCount"     Values="{Binding DataYCenters}"/>
            </lvc:CartesianChart.Series>
            <!--定义Y轴-->
            <lvc:CartesianChart.AxisY>
                <!-- 定义Y轴名称 -->
                <lvc:Axis Title="单位/次"></lvc:Axis>
            </lvc:CartesianChart.AxisY>

            <!--定义X轴-->
            <lvc:CartesianChart.AxisX>
                <!-- 定义X轴名称 -->
                <lvc:Axis Title="单位/次"></lvc:Axis>
            </lvc:CartesianChart.AxisX>
            <!--<lvc:CartesianChart.VisualElements>
                <lvc:VisualElement X="{Binding MinX}" Y="{Binding MaxY}">
                    <lvc:VisualElement.UIElement>
                        <TextBlock Foreground="Green">
                            Hello!, this is a note merged in the chart.
                        </TextBlock>
                    </lvc:VisualElement.UIElement>
                </lvc:VisualElement>
            </lvc:CartesianChart.VisualElements>-->
           
        </lvc:CartesianChart>
    </Grid>
</UserControl>
View Code

效果如下:

 @天才卧龙的博客

标签:ChartValues,12,get,图表,set,using,wpf,public,LiveCharts
From: https://www.cnblogs.com/chenwolong/p/17922064.html

相关文章

  • wpf + MaterialDesign + Prism8 实现导航功能
    十年河东,十年河西,莫欺少年穷学无止境,精益求精实现的效果: 1、初始化Prism 1.1、项目引入如下包 1.2、按照Prism规则,项目中创建如下文件夹 Prism规则:必须将窗体放入Views文件夹中,窗体名称必须以View结尾,必须将数据上下文放入ViewModels文件夹中,上下文类必须以Model结......
  • WPF中通过附加属性实现任意控件拖动调整大小
    publicclassResizeBehavior{//附加属性用于标识控件是否可调整大小publicstaticreadonlyDependencyPropertyIsResizableProperty=DependencyProperty.RegisterAttached("IsResizable",typeof(bool),typeof(ResizeBehavior),newP......
  • wpf 元素设置焦点无效的问题
    首先确定元素的Enabled, Visible, Loaded,and Focusable这四个属性,如果这些属性的任何一个为false,则不能设置焦点到该元素上。如果Focusable为false,设置焦点的方式可以先在鼠标左键按下事件中,设置Focusable,如下:userControl.MouseLeftButtonDown+=delegate{userCo......
  • WPF自定义控件之图形解锁控件 ScreenUnLock
    ScreenUnLock与智能手机上的图案解锁功能一样。通过绘制图形达到解锁或记忆图形的目的。本人突发奇想,把手机上的图形解锁功能移植到WPF中。也应用到了公司的项目中。在创建ScreenUnLock之前,先来分析一下图形解锁的实现思路。1.创建九宫格原点(或更多格子),每个点定义一个坐标值......
  • .NET Core 3 WPF MVVM框架 Prism系列之导航系统
    本文将介绍如何在.NETCore3环境下使用MVVM框架Prism基于区域Region的导航系统git在讲解Prism导航系统以前,咱们先来看看一个例子,我在以前的demo项目建立一个登陆界面:github 咱们看到这里是否是一开始想象到使用WPF带有的导航系统,经过Frame和Page进行页面跳转,而后经过导航日志......
  • 【WPF】 BasedOn的用法
    BasedOn用于样式的继承。这里的已经继承了一个样式  此时,我们想在Resource中让他附加新的样式,但是这样不成功  修改如下:去掉了之前的样式选择  我们使用BasedOn让其叠加样式 ......
  • Excel动态图表有多少种类型,你知道哪些?
    折线图:折线图是最常见的动态图表类型之一,它可以清晰地展现数据随时间变化的趋势。在Excel中,您可以轻松创建动态折线图,使数据的变化更加生动。柱状图:动态柱状图可以清晰地比较不同类别的数据,并随着数据的变化而自动更新。这种图表类型在展示多个数据项之间的对比时非常有用。饼图:......
  • 【C#/WPF】Bitmap、BitmapImage、ImageSource 、byte[]转换问题
    C#/WPF项目中,用到图像相关的功能时,涉及到多种图像数据类型的相互转换问题,这里做了个整理。包含的内容如下:Bitmap和BitmapImage相互转换。RenderTargetBitmap–>BitmapImageImageSource–>BitmapBitmapImage和byte[]相互转换。byte[]–>BitmapStackOverflow上有很......
  • WPF显示网络图片的几种方法
    1、利用数据流1Imageimg;2byte[]btyarray=GetImageFromResponse(imageUrl);34//字节数据转流5MemoryStreamms=newMemoryStream(btyarray);67//重点:设置Image控件的Source为流格式的图片数据8img.Source=BitmapFrame.Create(ms,BitmapCrea......
  • Wpf Bitmap(Image)Base64,Url,文件Path,Stream转BitmapSource(ImageSource),无需外部d
    直接上代码usingSystem;usingSystem.Drawing;usingSystem.IO;usingSystem.Windows.Forms;usingSystem.Windows.Media.Imaging;namespaceCommonUtils{///<summary>///Windows图片处理///</summary>publicstaticclassWindowsImage......