Chart

【C#】Chart 表示範囲の設定方法をわかりやすく解説

はじめに

Chartコントロールで、表示範囲を設定する変更する方法を解説します。結論から言ってしまうと、ChartAreas["XXX"].AxisX.Minimum / Maximum を設定することで表示範囲を変更できます。

※ AxisYも同様の方法で設定できます。

環境

この記事は以下の環境で作成しています。

環境バージョンなど
VisualStudio   2019 Community
.NET4.7.2
プロジェクトWindowsFormアプリケーション 
OSWindows 7

※ Windows10, VisualStudio 2017でも作成できます。

実行結果

後述する「折れ線グラフの表示範囲を設定するコード」の実行結果は以下の通りです。表示範囲を設定する/しないで以下のようにグラフの表示が変化します。

表示範囲を設定をしない場合

デフォルトの設定です。ポイントデータの最大・最小に応じて自動的にグラフの表示範囲が設定されます。

表示範囲を設定しない場合のグラフの実行結果
表示設定をしない場合のグラフ

表示範囲を設定をした場合

設定した値に応じて、以下のようにグラフが表示されます。( Minimamu=2, Maximum=4 で設定した場合)

表示範囲を設定する場合のグラフの実行結果

全体コード

折れ線グラフの表示範囲を設定するコードです。67,68行目で表示範囲に対する設定を行っています。

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

// Chartクラス関連の変数の宣言を簡略化するために
// Usingを追加しています
using System.Windows.Forms.DataVisualization.Charting;

namespace FormChartCostomize3
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();

            // FormにChartコントロール(chart1)を
            // 貼り付け済みであることを前提にしています。

            // サンプル用のデータです。 
            double[] pointX = { 1.0, 2.0, 3.0, 4.0, 5.0 };
            double[] pointY = { 1.0, 2.0, 3.0, 4.0, 5.0 };

            //
            // 貼り付けたChartコントロールには、
            // 初期値のデータがセットされているので、一旦クリアします
            //
            chart1.ChartAreas.Clear();
            chart1.Series.Clear();
            chart1.Titles.Clear();

            // 「chartArea」という名前のエリアを生成します
            ChartArea chartArea = new ChartArea("chartArea");

            // 生成したエリアをChartコントロールに追加します
            chart1.ChartAreas.Add(chartArea);

            // チャートにタイトルを追加します
            chart1.Titles.Add("表示範囲の設定");

            // Series(系列)を生成します
            Series series = new Series();

            // 系列の種類を散布図に設定します
            series.ChartType = SeriesChartType.Line;

            // 系列の凡例を設置します
            series.LegendText = "凡例1";


            // 系列のポイント情報をセットします
            for (int i = 0; i < 5; i++)
            {
                series.Points.AddXY(pointX[i], pointY[i]);
            }

            // 生成・設定した系列をChartコントロールに追加します
            chart1.Series.Add(series);

            // 表示範囲の設定
            chart1.ChartAreas["chartArea"].AxisX.Minimum = 2;
            chart1.ChartAreas["chartArea"].AxisX.Maximum = 4;

            // ScaleView.Size を使う方法
            // chart1.ChartAreas["chartArea"].AxisX.ScaleView.Size = 2;
            // chart1.ChartAreas["chartArea"].AxisX.IsMarginVisible = false;

        }
    }
}

コードのポイント

設定は軸のMinimum / Maximumを設定するだけ

表示範囲の設定は、範囲を設定したいグラフエリアのX軸/Y軸の最大・最小値を設定するだけで設定できます。

           // 表示範囲の設定
            chart1.ChartAreas["chartArea"].AxisX.Minimum = 2;
            chart1.ChartAreas["chartArea"].AxisX.Maximum = 4;

ScaleViewによる表示範囲の指定

ScaleView.Sizeでも表示範囲を設定することができます。Sizeには「グラフ内の線の数」を指定してください。この方法では、グラフに自動でスクロールバーが表示されます。

2行目のIsMarginVisibleを設定しないと、指定した線の数+マージン分が表示されてしまうので注意が必要です。

chart1.ChartAreas["chartArea"].AxisX.ScaleView.Size = 2;
chart1.ChartAreas["chartArea"].AxisX.IsMarginVisible = false;

ScaleViewマージンなしの場合

ScaleViewを使って表示範囲を制限したグラフの実行結果(マージンなしの場合)

ScaleViewマージンありの場合

ScaleViewを使って表示範囲を制限したグラフの実行結果(マージンありの場合)

折れ線グラフの場合、Sizeは「線の数」と考えてください。
上の例は「1-2」「2-3」の2つを設定しています。

まとめ

Chartコントロールで、表示範囲を設定する変更する方法を解説しました。参考になればうれしいです。

Lenovo Web広告限定ストア

エキスパートがよく使う「ThinkPad」や、コスパ抜群の「IdeaPad」がお得に購入できます。そろそろ、Macに負けない機能的なデザイン、フルカスタマイズしたPCが欲しい!とい方は以下のリンクからお得に購入してください。特別割引価格やクーポン情報がGETできます。

Lenovo

もっと詳しくChartの使いかたを知る

このブログでは、表示範囲設定以外に「凡例の表示位置変更・非表示」、「軸ラベルの設定方法」なども解説しています。Chartコントロールのカスタマイズに興味のある方は、以下のリンクからご覧ください。

凡例の位置を変更する方法

軸ラベルの設定方法

応援・要望お待ちしてます

ブログを見ていて「この辺を詳しく知りたい」「このライブラリの使い方を知りたい」「こんなことで困ってる」...etc があれば、コメント・問い合わせ・Twitterで教えてください。質問・ご要望に合わせて解説記事を作ります。

ブログを気に入っていただけたり、「応援してもいいよ」という方がいたら、ブログやSNSでの紹介をお願いします。 あたたかい応援は、中の人の更新の大きな励みになります。

ABOUT ME
えす
現役のソフトウェアエンジニアです。 C++ C# Python を使ってます。10年ちょい設計/開発部門にいましたが、今はQAエンジニアっぽいことをしています。

COMMENT

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