iPentec.com  /  Doc  /  ASP.NET  /  C#  /  Chartコントロール

目次

Chart コントロールのグラフ表示形式、表示色を変更する - ASP.NET

Chart コントロールのグラフ表示形式を変更する手順を紹介します。

プログラム

ASP.NETアプリケーションを作成します。

UI

下図のUIを作成します。WebフォームにChartコントロールを配置します。

コード

ChartType.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ChartType.aspx.cs" Inherits="SimpleChart.ChartType" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <asp:Chart ID="Chart1" runat="server" Height="200px" Width="600px">
        <Series>
          <asp:Series Name="Series1"></asp:Series>
        </Series>
        <ChartAreas>
          <asp:ChartArea Name="ChartArea1"></asp:ChartArea>
        </ChartAreas>
      </asp:Chart>
    </div>
    </form>
</body>
</html>
ChartType.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.DataVisualization.Charting;

namespace SimpleChart
{
  public partial class ChartType : System.Web.UI.Page
  {
    protected void Page_Load(object sender, EventArgs e)
    {
      Chart1.Series.Add("series1");
      Chart1.Series["series1"].XValueType = ChartValueType.DateTime;

      Chart1.Series["series1"].Points.AddXY(new DateTime(2010, 8,  1),165);
      Chart1.Series["series1"].Points.AddXY(new DateTime(2010, 8,  2),540);
      Chart1.Series["series1"].Points.AddXY(new DateTime(2010, 8,  3),671);
      Chart1.Series["series1"].Points.AddXY(new DateTime(2010, 8,  4),613);
      Chart1.Series["series1"].Points.AddXY(new DateTime(2010, 8,  5),619);
      Chart1.Series["series1"].Points.AddXY(new DateTime(2010, 8,  6),562);
      Chart1.Series["series1"].Points.AddXY(new DateTime(2010, 8,  7),198);
      Chart1.Series["series1"].Points.AddXY(new DateTime(2010, 8,  8),169);
      Chart1.Series["series1"].Points.AddXY(new DateTime(2010, 8,  9),527);
      Chart1.Series["series1"].Points.AddXY(new DateTime(2010, 8, 10),587);
      Chart1.Series["series1"].Points.AddXY(new DateTime(2010, 8, 11),507);
      Chart1.Series["series1"].Points.AddXY(new DateTime(2010, 8, 12),475);
      Chart1.Series["series1"].Points.AddXY(new DateTime(2010, 8, 13),388);
      Chart1.Series["series1"].Points.AddXY(new DateTime(2010, 8, 14),189);
      Chart1.Series["series1"].Points.AddXY(new DateTime(2010, 8, 15),186);
      Chart1.Series["series1"].Points.AddXY(new DateTime(2010, 8, 16),507);
      Chart1.Series["series1"].Points.AddXY(new DateTime(2010, 8, 17),645);
      Chart1.Series["series1"].Points.AddXY(new DateTime(2010, 8, 18),622);
      Chart1.Series["series1"].Points.AddXY(new DateTime(2010, 8, 19),670);
      Chart1.Series["series1"].Points.AddXY(new DateTime(2010, 8, 20),586);
      Chart1.Series["series1"].Points.AddXY(new DateTime(2010, 8, 21),224);
      Chart1.Series["series1"].Points.AddXY(new DateTime(2010, 8, 22),214);
      Chart1.Series["series1"].Points.AddXY(new DateTime(2010, 8, 23),679);
      Chart1.Series["series1"].Points.AddXY(new DateTime(2010, 8, 24),688);
      Chart1.Series["series1"].Points.AddXY(new DateTime(2010, 8, 25),644);
      Chart1.Series["series1"].Points.AddXY(new DateTime(2010, 8, 26),138);
      Chart1.Series["series1"].Points.AddXY(new DateTime(2010, 8, 27),433);
      Chart1.Series["series1"].Points.AddXY(new DateTime(2010, 8, 28),212);
      Chart1.Series["series1"].Points.AddXY(new DateTime(2010, 8, 29),221);
      Chart1.Series["series1"].Points.AddXY(new DateTime(2010, 8, 30),673);
      Chart1.Series["series1"].Points.AddXY(new DateTime(2010, 8, 31),729);

    }
  }
}

表示結果

上記のプロジェクトを実行すると下図の画面が表示されます。

棒グラフの色を変更する

棒グラフ(ChartType = SeriesChartType.Column)の色を変更する場合は、対象のSeriesのColorプロパティに描画する色を指定します。
ChartType.aspx.csのコードを下記に変更します。
ChartType.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.DataVisualization.Charting;
using System.Drawing;

namespace SimpleChart
{
  public partial class ChartType : System.Web.UI.Page
  {
    protected void Page_Load(object sender, EventArgs e)
    {
      Chart1.Series.Add("series1");

      Chart1.Series["series1"].ChartType = SeriesChartType.Column;
      Chart1.Series["series1"].Color = Color.FromArgb(65,143,102);
      Chart1.Series["series1"].XValueType = ChartValueType.DateTime;

      Chart1.Series["series1"].Points.AddXY(new DateTime(2010, 8,  1),165);
       /* 中略 */
      Chart1.Series["series1"].Points.AddXY(new DateTime(2010, 8, 31),729);

    }
  }
}

表示結果

上記のプロジェクトを実行すると下図の画面が表示されます。グラフのバーのカラーが緑色で表示されます。

グラフの種類を線グラフに変更する

グラフの種類を線グラフに変更する場合は、対象のSeriesのChartType プロパティを"SeriesChartType.Line"に変更します。
ChartType.aspx.csのコードを下記に変更します。
ChartType.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.DataVisualization.Charting;
using System.Drawing;

namespace SimpleChart
{
  public partial class ChartType : System.Web.UI.Page
  {
    protected void Page_Load(object sender, EventArgs e)
    {
      Chart1.Series.Add("series1");

      //Line
      Chart1.Series["series1"].ChartType = SeriesChartType.Line;
      Chart1.Series["series1"].XValueType = ChartValueType.DateTime;

      Chart1.Series["series1"].Points.AddXY(new DateTime(2010, 8,  1),165);
       /* 中略 */
      Chart1.Series["series1"].Points.AddXY(new DateTime(2010, 8, 31),729);

    }
  }
}

表示結果

上記のプロジェクトを実行すると下図の画面が表示されます。表示されるグラフが線フラフに変わります。

線グラフの色を変更する、

線グラフのグラフ線の色を変更する場合も、棒グラフの場合と同様に対象のSeriesのColorプロパティに描画色を設定します。
    protected void Page_Load(object sender, EventArgs e)
    {
      Chart1.Series.Add("series1");

      Chart1.Series["series1"].ChartType = SeriesChartType.Column;
      Chart1.Series["series1"].Color = Color.FromArgb(65,143,102);
      
      //Line
      Chart1.Series["series1"].ChartType = SeriesChartType.Line;
      Chart1.Series["series1"].Color = Color.FromArgb(192, 80, 80);

      Chart1.Series["series1"].XValueType = ChartValueType.DateTime;

      Chart1.Series["series1"].Points.AddXY(new DateTime(2010, 8,  1),165);
       /* 中略 */
      Chart1.Series["series1"].Points.AddXY(new DateTime(2010, 8, 31),729);

    }

表示結果

上記のプロジェクトを実行すると下図の画面が表示されます。表示されるグラフが線フラフに変わります。

線フラグの線の太さを指定する

グラフの線の太さを太くする場合は、対象のSeriesのBorderWidth プロパティを指定します。
    protected void Page_Load(object sender, EventArgs e)
    {
      Chart1.Series.Add("series1");

      Chart1.Series["series1"].ChartType = SeriesChartType.Column;
      Chart1.Series["series1"].Color = Color.FromArgb(65,143,102);
      
      //Line
      Chart1.Series["series1"].ChartType = SeriesChartType.Line;
      Chart1.Series["series1"].Color = Color.FromArgb(192, 80, 80);
      Chart1.Series["series1"].BorderWidth = 2;

      Chart1.Series["series1"].XValueType = ChartValueType.DateTime;

      Chart1.Series["series1"].Points.AddXY(new DateTime(2010, 8,  1),165);
       /* 中略 */
      Chart1.Series["series1"].Points.AddXY(new DateTime(2010, 8, 31),729);

    }

表示結果

上記のプロジェクトを実行すると下図の画面が表示されます。表示される線グラフがの線の太さが太くなります。

グラフの種類を点グラフに変更する

グラフの種類を点グラフに変更する場合は、対象のSeriesのChartType プロパティを"SeriesChartType.Point"に変更します。
ChartType.aspx.csのコードを下記に変更します。
ChartType.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.DataVisualization.Charting;
using System.Drawing;

namespace SimpleChart
{
  public partial class ChartType : System.Web.UI.Page
  {
    protected void Page_Load(object sender, EventArgs e)
    {
      Chart1.Series.Add("series1");
      Chart1.Series["series1"].ChartType = SeriesChartType.Point;
      Chart1.Series["series1"].XValueType = ChartValueType.DateTime;

      Chart1.Series["series1"].Points.AddXY(new DateTime(2010, 8,  1),165);
       /* 中略 */
      Chart1.Series["series1"].Points.AddXY(new DateTime(2010, 8, 31),729);

    }
  }
}

表示結果

上記のコードを実行すると下図の画面が表示されます。表示されるグラフが点グラフになります。

グラフの色を変更する場合

点グラフのプロットの色を変更する場合も、対象のSeriesのBorderColor, MarkerColor プロパティに描画色を設定します。
    protected void Page_Load(object sender, EventArgs e)
    {
      Chart1.Series.Add("series1");
      Chart1.Series["series1"].ChartType = SeriesChartType.Point;
      Chart1.Series["series1"].BorderColor = Color.FromArgb(11, 64, 108);
      Chart1.Series["series1"].MarkerColor = Color.FromArgb(116, 194, 216);
      Chart1.Series["series1"].XValueType = ChartValueType.DateTime;

      Chart1.Series["series1"].Points.AddXY(new DateTime(2010, 8,  1),165);
       /* 中略 */
      Chart1.Series["series1"].Points.AddXY(new DateTime(2010, 8, 31),729);

    }

表示結果

上記のコードを実行するとプロットのカラーが変更されたグラフが表示できます。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.DataVisualization.Charting;

namespace SimpleChart
{
  public partial class ChartType : System.Web.UI.Page
  {
    protected void Page_Load(object sender, EventArgs e)
    {
      Chart1.Series.Add("series1");

      Chart1.Series["series1"].ChartType = SeriesChartType.Line;

      Chart1.Series["series1"].XValueType = ChartValueType.DateTime;

      Chart1.Series["series1"].Points.AddXY(new DateTime(2010, 8,  1),165);
      /* 中略 */
      Chart1.Series["series1"].Points.AddXY(new DateTime(2010, 8, 31),729);

    }
  }
}
著者
Penta
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用

関連するページ

最終更新日: 2024-01-06
作成日: 2016-07-21
ドキュメント
新着記事一覧
タグ一覧
ドキュメント トップ
コンテンツ
YouTube
iPentec
プライバシー
iPentecについて
iPentec all rights reserverd.