amChartsQuickCharts图表的制作

最新推荐文章于 2025-11-24 07:52:55 发布

原创最新推荐文章于 2025-11-24 07:52:55 发布 · 558 阅读

0 ·

CC 4.0 BY-SA版权

可以分享

.Net应用技术专栏收录该内容

123 篇文章

订阅专栏

本文介绍如何使用amChartsQuickCharts在WPF项目中创建吸引人的LineChart和PieChart，包括安装步骤、数据绑定及代码示例。

amCharts Quick Charts是支持WPF的轻量级图表控件，利用它，我们可以绘制Line，Column，Area和Pie Charts。使应用程序具有设计良好且有吸引力的界面。

一、amCharts安装

step1:NuGet包管理器控制台安装 amCharts Quick Charts

创建一个空WPF项目。创建后，转到工具 - > NuGet包管理器 - > 包管理器控制台。

PM>Install-package  amCharts Quick Charts

或者通过搜索amChartsQuickCharts 来安装
在这里插入图片描述
此时，项目引用将出现 AmCharts.Windows.QuickCharts

step 2：添加引用空间

实现这些图表，首先要为AmCharts的附加引用编写一个名称空间。

<!---->
xmlns:amCharts="http://schemas.amcharts.com/quick/wpf/2010/xaml"

二、创建Pie Chart

效果图
准备数据基础类PData

public class PData
{
  public string title { get; set; }
  public double value { get; set; }
}

ViewModel中创建具有通知功能的可观察的数据集合属性 Data

private ObservableCollection<PData> _Data = new ObservableCollection<PData>
{
       new PData() { title = "slice #1", value = 30 },
       new PData() { title = "slice #2", value = 60 },
       new PData() { title = "slice #3", value = 40 },
       new PData() { title = "slice #4", value = 50 },
       new PData() { title = "slice #5", value = 60 },
       new PData() { title = "slice #6", value = 70 },

};
public ObservableCollection<PData> Data
{
    get { return this._Data; }
    set
    {
        this._Data = value;
        RaisePropertyChanged(() => Data);
    }
}

MainWindows.xaml

<Window x:Class="AmCharts.Views.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:AmCharts.Views"
        xmlns:amCharts="http://schemas.amcharts.com/quick/wpf/2010/xaml"
        mc:Ignorable="d"
        Title="{Binding Title}" Height="450" Width="400">
    <Grid>
        <amCharts:PieChart x:Name="piechart"  DataSource="{Binding Data}"  
                           TitleMemberPath="title" 
                           ValueMemberPath="value"/>

    </Grid>
</Window>

MainWindows.xaml.cs 后台代码实现 DataContext绑定

using AmCharts.ViewModels;
using System.Windows;

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

            this.DataContext = new MainWindowViewModel();

        }
    }
}

三、创建 Line Chart

效果如下图
在这里插入图片描述
代码如下：

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
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.Shapes;

namespace AmCharts.Views
{
    /// <summary>
    /// Line_Chart.xaml 的交互逻辑
    /// </summary>
    public partial class Line_Chart : Window
    {
        public Line_Chart()
        {
            InitializeComponent();

            //数据绑定
            this.DataContext = this;
        }

        #region |line chart|

        private ObservableCollection<TestDataItem> _data = new ObservableCollection<TestDataItem>()
        {
            new TestDataItem() { cat1 = "cat1", val1=5, val2=15, val3=12},
            new TestDataItem() { cat1 = "cat2", val1=15.2, val2=1.5, val3=2.1M},
            new TestDataItem() { cat1 = "cat3", val1=25, val2=5, val3=2},
            new TestDataItem() { cat1 = "cat4", val1=8.1, val2=1, val3=22},
            new TestDataItem() { cat1 = "cat5", val1=8.1, val2=1, val3=22},
            new TestDataItem() { cat1 = "cat6", val1=8.1, val2=1, val3=22},
            new TestDataItem() { cat1 = "cat7", val1=4.1, val2=4, val3=2},
            new TestDataItem() { cat1 = "cat8", val1=8.1, val2=1, val3=22},
            new TestDataItem() { cat1 = "cat9", val1=8.1, val2=1, val3=22},
            new TestDataItem() { cat1 = "cat10", val1=8.1, val2=1, val3=22},
            new TestDataItem() { cat1 = "cat11", val1=8.1, val2=1, val3=22},
            new TestDataItem() { cat1 = "cat12", val1=8.1, val2=1, val3=22},
            new TestDataItem() { cat1 = "cat13", val1=4.1, val2=4, val3=2},
            new TestDataItem() { cat1 = "cat14", val1=8.1, val2=1, val3=22},
            new TestDataItem() { cat1 = "cat15", val1=8.1, val2=1, val3=22},
            new TestDataItem() { cat1 = "cat16", val1=8.1, val2=1, val3=22},
            new TestDataItem() { cat1 = "cat17", val1=8.1, val2=1, val3=22},
        };

        public ObservableCollection<TestDataItem> Data { get { return _data; } }


        public class TestDataItem
        {
            public string cat1 { get; set; }
            public double val1 { get; set; }
            public double val2 { get; set; }
            public decimal val3 { get; set; }
        }

        #endregion

    }
}

<Window x:Class="AmCharts.Views.Line_Chart"
        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:AmCharts.Views"
         xmlns:amCharts="http://schemas.amcharts.com/quick/wpf/2010/xaml"
        mc:Ignorable="d"
        Title="Line_Chart" Height="450" Width="800">

    <Window.Resources>
        <Style x:Key="TextNormalStyle" TargetType="TextBlock">
            <Setter Property="Foreground" Value="Yellow"/>
            <Setter Property="FontSize"  Value="22"/>
            <Setter Property="Padding"   Value="5"/>
        </Style>

        <Style x:Key="TextTitle1Style" TargetType="TextBlock">
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="FontSize"  Value="14"/>
        </Style>
    </Window.Resources>

    <Grid x:Name="LayoutRoot">
        <Grid.Background>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="Black"/>
                <GradientStop Color="#FFF17E19" Offset="0.655"/>
            </LinearGradientBrush>
        </Grid.Background>

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->

        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="24,24,0,12">
            <TextBlock x:Name="ApplicationTitle" Text="amCharts QuickCharts" Style="{ StaticResource  TextNormalStyle}" Margin="0,0,12,0"/>
            <TextBlock x:Name="PageTitle" Text="line chart" Margin="2" Style="{StaticResource TextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

            <amCharts:SerialChart BorderBrush="White" BorderThickness="3" x:Name="chart1"
                                  DataSource="{Binding Data}"
                                  CategoryValueMemberPath="cat1"
                                   
                         AxisForeground="White"
                         PlotAreaBackground="BlanchedAlmond"
                         MinimumCategoryGridStep="200"
                         GridStroke="White" Margin="0,63,0,10">
                
                <amCharts:SerialChart.Graphs>
                    <amCharts:LineGraph ValueMemberPath="val1" Title="Line #1" Brush="Blue" />
                    
                    <amCharts:ColumnGraph ValueMemberPath="val2" Title="Column #2" Brush="Yellow" 
                                          ColumnWidthAllocation="0.4" />
                    
                    <amCharts:AreaGraph ValueMemberPath="val3" Title="Area #1" Brush="Red" />
                </amCharts:SerialChart.Graphs>
            </amCharts:SerialChart>


        </Grid>
    </Grid>
</Window>