【解決方法】C# WPF でライブチャートをカスタマイズするには?

[ad_1]

I'm using C# WPF in Visual Studio with .NET Framework 4.7.2 with SQL Server 2019 Database, and using LiveChart


What I want

I'm looking for easy and good tool for chart in WPF to control these things :

https://learn.microsoft.com/answers/storage/attachments/271685-simulate.png[^]

Change font and style color of chart

Show label on top of column's chart

change text form of numbers like this 15000 => 15,000

私が試したこと：

https://learn.microsoft.com/answers/storage/attachments/271732-untitled.jpg[^]

My Full source code with table script :
https://mega.nz/file/c4RH1JaJ#0CwjWU_qgh8YoVXZVGh-fjkguCqE_rd7KH8rF7LhkD4

<a href="https://mega.nz/file/c4RH1JaJ#0CwjWU_qgh8YoVXZVGh-fjkguCqE_rd7KH8rF7LhkD4">Source Coode</a>

How can I do these things that I need? I was really confused between the tools

is there anything better than which be easy to do this ?

解決策 1

LiveCharts – LiveCharts2[^] 使い方はとても簡単です。ドキュメントは、与えられたコードサンプルで非常に優れています.

彼らのドキュメントから、参照： samples.bars.withBackground – LiveCharts2[^]

1.ビューモデル

using CommunityToolkit.Mvvm.ComponentModel;
using LiveChartsCore;
using LiveChartsCore.SkiaSharpView;
using LiveChartsCore.SkiaSharpView.Painting;
using SkiaSharp;

namespace ViewModelsSamples.Bars.WithBackground;

[ObservableObject]
public partial class ViewModel
{
    public ISeries[] Series { get; set; } =
    {
        new ColumnSeries<double>
        {
            IsHoverable = false, // disables the series from the tooltips 
            Values = new double[] { 10, 10, 10, 10, 10, 10, 10 },
            Stroke = null,
            Fill = new SolidColorPaint(new SKColor(30, 30, 30, 30)),
            IgnoresBarPosition = true
        },
        new ColumnSeries<double>
        {
            Values = new double[] { 3, 10, 5, 3, 7, 3, 8 },
            Stroke = null,
            Fill = new SolidColorPaint(SKColors.CornflowerBlue),
            IgnoresBarPosition = true
        }
    };

    public Axis[] YAxes { get; set; } =
    {
        new Axis { MinLimit = 0, MaxLimit = 10 }
    };
}

2.ユーザーコントロール:

XML

<UserControl x:Class="WPFSample.Bars.WithBackground.View"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
             xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.WPF;assembly=LiveChartsCore.SkiaSharpView.WPF"
             xmlns:vms="clr-namespace:ViewModelsSamples.Bars.WithBackground;assembly=ViewModelsSamples">
    <UserControl.DataContext>
        <vms:ViewModel/>
    </UserControl.DataContext>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <lvc:CartesianChart Series="{Binding Series}" YAxes="{Binding YAxes}"></lvc:CartesianChart>
    </Grid>
</UserControl>

上記のコードの実装に行き詰まっている場合は、リポジトリをダウンロードしてください。棒グラフを含む、簡単に実行できる WPF (およびその他) のサンプルがあります。 LiveCharts2-Github[^]

[UPDATE]

コードビハインドにバインドされた上記のコードの更新バージョンを次に示します。

1. 分離コード:

using CommunityToolkit.Mvvm.ComponentModel;
using LiveChartsCore;
using LiveChartsCore.SkiaSharpView;
using LiveChartsCore.SkiaSharpView.Painting;
using SkiaSharp;
using System.Windows;

namespace WpfLiveCharts2CodeBehind;

[ObservableObject]
public partial class MainWindow : Window
{
    public MainWindow() => InitializeComponent();

    public ISeries[] Series { get; set; } =
    {
        new ColumnSeries<double>
        {
            IsHoverable = false, // disables the series from the tooltips 
            Values = new double[] { 10, 10, 10, 10, 10, 10, 10 },
            Stroke = null,
            Fill = new SolidColorPaint(new SKColor(30, 30, 30, 30)),
            IgnoresBarPosition = true
        },
        new ColumnSeries<double>
        {
            Values = new double[] { 3, 10, 5, 3, 7, 3, 8 },
            Stroke = null,
            Fill = new SolidColorPaint(SKColors.CornflowerBlue),
            IgnoresBarPosition = true
        }
    };

    public Axis[] YAxes { get; set; } =
    {
        new Axis { MinLimit = 0, MaxLimit = 10 }
    };
}

2. ウィンドウ:

XML

<Window x:Class="WpfLiveCharts2CodeBehind.MainWindow"
        x:Name="Window"
        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:WpfLiveCharts2CodeBehind"
        xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.WPF;assembly=LiveChartsCore.SkiaSharpView.WPF"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">

    <Grid DataContext="{Binding ElementName=Window}">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <lvc:CartesianChart Series="{Binding Series}"
                            YAxes="{Binding YAxes}"
                            />
    </Grid>

</Window>

壊す：
1.与える Window 名前：

XML

<Window ... x:Name="Window" ...>

2. ウィンドウの名前に DataBind します。

XML

DataContext="{Binding ElementName=Window}"

[ad_2]