C#

【C#】LiveChartsのToolTipsをカスタマイズしてみた

この記事では LiveCharts の ToolTips に注目して、カスタマイズする方法を紹介しています。

LiveChartsをもっと知りたい方や興味がある方は最後まで読んでみてください。

LiveCharts の ToolTips

LiveCharts で作成したグラフにカーソルやマウスポインタを合わせるとその周辺に対象となるグラフのポインタ情報が表示されます。

このブログで以前作成したグラフを使って確認してみると、下図のようにToolTips が表示されていますね。

Chart

Live Chartsを使って
棒グラフを作成する方法

\ グラフの作成方法を詳しくみる /

棒グラフの X 軸と Y 軸のそれぞれの値が表示されていますが、他のグラフの場合はどうでしょうか。

積み上げ棒グラフで確認してみます。

マウスホバーした棒グラフの Y 軸全てのポイント情報に加え、全体に対するポイントの割合まで丁寧に表示をしてくれます。ただし、使用用途によってはマウスホバーしたポイントだけを表示したい場合があることでしょう。

こういう場合は、ToolTips に関係するプロパティの設定を変更することで、表示する情報をカスタマイズする事ができます。

この記事では、LiveCharts のマニュアルを参考してカスタマイズしてみました。

ToolTips をカスタマイズ

この記事では、以下の開発環境でプロジェクトを作成していきます。

  • 開発環境:Visual Studio 2022
  • フレームワーク:.NET 6.0
  • OS:Windows 10
  • プロジェクト:WPF
  • プロジェクト名:

LiveCharts を NuGet からプロジェクトへインストールをしておきます。

XAML画面を開いて、CartesianChart コントロール(名前:lvChart)を配置します。

フォントのサイズ・色、背景色を変更する

まずは ToolTips で表示されるデザインをちょこ変してみます。

CartesianChart オブジェクトの DataTooltip プロパティを使って次のように記述します。

lvChart.DataTooltip.FontSize = 12;                   //フォントサイズ変更
lvChart.DataTooltip.Foreground = Brushes.White;      //フォントカラー変更
lvChart.DataTooltip.Background = Brushes.LightGray;  //背景色変更

 

ToolTipsのフォントサイズを12、フォントカラーを白、背景色をライトグレーに変更されているかデバッグします。

グラフにカーソルを合わせると指定した通りに表示がされていますね。

 

表示モードを変更する

マウスホバーしたポイントだけを表示するには、SelectionMode の設定を変更します。

TooltipSelectionMode 列挙体には6つのモードが選択されています。マウスホバーしたポイントだけを表示するなら OnlySender を選択するといいでしょう。

var tooltip = (DefaultTooltip)lvChart.DataTooltip;
tooltip.SelectionMode = TooltipSelectionMode.OnlySender;  //表示モード変更変更

 

ToolTips の表示が変わっているかデバッグします。フォントスタイルを変更した時(上述)とは異なり、マウスホバーした部分のポイントが表示されています。

他のモードを選択した時はどうなるかを確認してみます。

TooltipSelectionMode内容イメージ
Autoグラフの種類に基づいて自動表示
OnlySenderマウスホバーされたポイントのみ表示
SharedXValuesマウスホバーされたX軸のポイントの値と同じ値を全て表示するX軸”Grapes”の値を全て表示
SharedYValuesマウスホバーされたY軸のポイントの値と同じ値を全て表示するY軸の値”6″を全て表示
SharedXInSeriesマウスホバーされたデータ系列と同じX軸のポイントの値と同じ値を全て表示する灰色のデータ系列でX軸”Grapes”の値を全て表示
SharedYInSeriesマウスホバーされたデータ系列と同じY軸のポイントの値と同じ値を全て表示する灰色のデータ系列でY軸の値”6″を全て表示

 

表示内容を変更する

ToolTips の表示内容そのものを自由に変更する方法があります。

この方法は WPF の UserContorl で作成した独自の画面を表示します。※ Windows Form では利用できない方法です。

ChartData.cs

まずはプロジェクトに「ChartData.cs」という名前でファイルを新規作成します。

この作成したファイルの ChartData クラスに ToolTips に表示したいデータをプロパティを記述します。

namespace Chart
{
    public class ChartData
    {
        public string Name { get; set; }
        public string Price { get; set; }
        public int Quantity { get; set; }
    }
}

 

CustomToolTips.xaml.cs

次にプロジェクトに「CustomToolTips.xaml」という名前をUserControl を追加します。

ソースファイルを開き、CustomToolTips の継承元を UserControl から IChartTooltip に変更します。

IChartTooltip は INotifyPropertyChanged を継承しているので、INotifyPropertyChanged を実装するためのイベントハンドラを記述します。

また、TooltipData プロパティ と TooltipSelectionMode プロパティを記述します。 この時、マウスホバーしたポイントのみ取得するように TooltipSelectionMode プロパティの初期設定を OnlySender にしておきます。

namespace Chart
{
    public partial class CustomToolTips : IChartTooltip
    {
        // INotifyPropertyChanged を実装するためのイベントハンドラ
        public event PropertyChangedEventHandler PropertyChanged;

        // プロパティ名によって自動的にセットされる
        private void RaisePropertyChanged([CallerMemberName] string? propertyName = null) =>
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));

        private TooltipData _Data;
        public TooltipData Data
        {
            get { return _Data; }
            set { if (_Data != value) { _Data = value; RaisePropertyChanged("Data"); } }
        }

        public TooltipSelectionMode? SelectionMode { get; set; } = TooltipSelectionMode.OnlySender;

        public CustomToolTips()
        {
            InitializeComponent();

            this.DataContext = this;
        }
    }
}

 

CustomToolTips.xaml

続いて、XAMLファイルを開きます。

TooltipData のポイントコレクションを並べて表示する為に、ItemsControl クラスを使います。ItemsControl クラスは非常に柔軟性が高く、扱えるようになっておきたいクラスの1つです。

DataTemplate には要素を表示するテンプレートを指定します。今回の場合だと、名前空間 LiveCharts.Wpf に定義されている DataPointViewModel を設定します。

<UserControl
    x:Class="Chart.CustomToolTips"
    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:local="clr-namespace:Chart"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:wpf="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
    d:DesignHeight="450"
    d:DesignWidth="800"
    mc:Ignorable="d">
    <Border
        Padding="10,10"
        Background="#E41c555d"
        BorderBrush="#1c555d"
        BorderThickness="1"
        CornerRadius="10">
        <ItemsControl Grid.IsSharedSizeScope="True" ItemsSource="{Binding Data.Points}">
            <ItemsControl.ItemTemplate>
                <DataTemplate DataType="{x:Type wpf:DataPointViewModel}">
                    <Grid Margin="2">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="AUTO" />
                            <RowDefinition Height="AUTO" SharedSizeGroup="Name" />
                            <RowDefinition Height="AUTO" SharedSizeGroup="Region" />
                            <RowDefinition Height="AUTO" SharedSizeGroup="Quantity" />
                        </Grid.RowDefinitions>
                        <Rectangle
                            Grid.Row="0"
                            Width="15"
                            Height="15"
                            Fill="{Binding Series.Fill}"
                            Stroke="{Binding Series.Stroke}" />
                        <TextBlock
                            Grid.Row="1"
                            Margin="5,0,0,0"
                            VerticalAlignment="Center"
                            Foreground="White"
                            Text="{Binding ChartPoint.Instance.(local:ChartData.Name), StringFormat=名前 : {0}}" />
                        <TextBlock
                            Grid.Row="2"
                            Margin="5,0,0,0"
                            VerticalAlignment="Center"
                            Foreground="White"
                            Text="{Binding ChartPoint.Instance.(local:ChartData.Region), StringFormat=産地 : {0}}" />
                        <TextBlock
                            Grid.Row="3"
                            Margin="5,0,0,0"
                            VerticalAlignment="Center"
                            Foreground="White"
                            Text="{Binding ChartPoint.Instance.(local:ChartData.Quantity), StringFormat=数量 : {0}}" />
                    </Grid>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Border>
</UserControl>

 

MainWindow.xaml

カスタマイズした ToolTips が表示されるように、DataTooltip に CustomToolTips をセットします。

<Window
    x:Class="Chart.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:local="clr-namespace:Chart"
    xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="MainWindow"
    Width="800"
    Height="450"
    mc:Ignorable="d">
    <Grid>
        <lvc:CartesianChart Name="lvChart" LegendLocation="Right">
            <lvc:CartesianChart.Series>
                <lvc:StackedColumnSeries Values="{Binding chartValues}" />
            </lvc:CartesianChart.Series>
            <lvc:CartesianChart.AxisX>
                <lvc:Axis Labels="{Binding Labels}" LabelsRotation="-15">
                    <lvc:Axis.Separator>
                        <lvc:Separator Step="1" />
                    </lvc:Axis.Separator>
                </lvc:Axis>
            </lvc:CartesianChart.AxisX>
            <lvc:CartesianChart.AxisY>
                <lvc:Axis MaxValue="10.0" MinValue="0.0" />
            </lvc:CartesianChart.AxisY>
            <lvc:CartesianChart.DataTooltip>
                <local:CustomToolTips />
            </lvc:CartesianChart.DataTooltip>
        </lvc:CartesianChart>
    </Grid>
</Window>

 

MainWindow.xaml.cs

グラフの種類を積み上げ棒グラフにする為に、StackedColumnSeries クラスを使います。

データ系列を2つ用意して、StackedColumnSeries の Values オブジェクトにセットします。

X 軸とY 軸をどのようにプロットするかを明示するためにマッパーを作成します。今回はX 軸は index(インデックス番号)、Y 軸は Quantity(数量)にしています。

namespace Chart
{
    public partial class MainWindow : Window
    {
        public SeriesCollection seriesCollection { get; set; }
        public string[] Labels { get; set; }

        public MainWindow()
        {
            InitializeComponent();

            //データ系列1
            var dataSeries1 = new ChartValues();
            dataSeries1.Add(new ChartData { Name = "りんご", Region = "日本", Quantity = 3 });
            dataSeries1.Add(new ChartData { Name = "バナナ", Region = "フィリピン", Quantity = 7 });
            dataSeries1.Add(new ChartData { Name = "ぶどう", Region = "アメリカ", Quantity = 3 });
            dataSeries1.Add(new ChartData { Name = "キウイ", Region = "中国", Quantity = 4 });
            dataSeries1.Add(new ChartData { Name = "みかん", Region = "日本", Quantity = 6 });

            //データ系列2
            var dataSeries2 = new ChartValues();
            dataSeries2.Add(new ChartData { Name = "りんご", Region = "トルコ", Quantity = 2 });
            dataSeries2.Add(new ChartData { Name = "バナナ", Region = "エクアドル", Quantity = 3 });
            dataSeries2.Add(new ChartData { Name = "ぶどう", Region = "イタリア", Quantity = 3 });
            dataSeries2.Add(new ChartData { Name = "キウイ", Region = "ニュージーランド", Quantity = 1 });
            dataSeries2.Add(new ChartData { Name = "みかん", Region = "中国", Quantity = 4 });

            //グラフ設定
            seriesCollection = new SeriesCollection();
            seriesCollection.Add(new StackedColumnSeries
            {
                Values = dataSeries1,
                Fill = Brushes.DarkOrange,
            });
            seriesCollection.Add(new StackedColumnSeries
            {
                Values = dataSeries2,
                Fill = Brushes.DarkGray
            });

            //X軸のラベル
           Labels = new[] { "りんご", "バナナ", "ぶどう", "キウイ", "みかん" };

            //マッパー作成
            var viewModelMapper = Mappers.Xy()
                .X((value, index) => index)
                .Y(value => value.Quantity);

            Charting.For(viewModelMapper);

            DataContext = this;
        }
    }
}

 

ここまで出来たらデバッグをしてみましょう。

狙い通り、ToolTips の表示内容を変更することができていました。

ToolTips に表示されるグラフのデータ系列を示す四角形の枠線が、別のデータ系列の色になっています。ここも変更することができるのだろうか…

とりあえず、この記事ではここまで。最後まで読んで頂きありがとうございました。

以上、最後まで読んで頂きありがとうございました。

プログラミングを学習したいなら…

プログラミングスキルを身に付けるなら、プログラミングを効率良く学べる
プログラミングスクール」がオススメです。

特にこんな方にオススメ!!
これからエンジニアを目指したい
プログラミングの専門性を高めたい
プログラミングを学んで副業をしたい
エンジニアに転職して年収をアップさせたい

プログラミングを触ったことがない未経験からでも、プログラミングスクールで学習すれば、エンジニアへ就職・転職することも可能です。

あなたの「行動力」と「やる気」で、あなたの人生を大きく変えるチャンスになることでしょう。

プログラミングスクールに興味がある方は是非チェックしてみてください。

> プログラミングを学ぶ <

COMMENT

メールアドレスが公開されることはありません。

CAPTCHA