2025年3月3日 星期一

[研究]ASP.NET, WebForm, Chart 雷達圖測試(一)

[研究]ASP.NET, WebForm, Chart 雷達圖測試(一)

2025-03-03

環境：Visual Studio 2019 + ASP.NET + WebForm + Web Application + C# + SQL Server 2019 + SQL Server Management Studio (SSMS) 19

********************************************************************************

把Chart拖入「設計」畫面，會註冊元件。

Default.aspx

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

<%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>

<!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">
        <asp:Chart ID="Chart1" runat="server" Width="600px" Height="500px">
            <Titles>
                <asp:Title Text="雷達圖 - 只顯示線條" Font="Arial, 14pt, style=Bold" />
            </Titles>
            <Series>
                <asp:Series Name="Series1" ChartType="Radar" BorderWidth="2" BorderColor="Blue" />
            </Series>
            <ChartAreas>
                <asp:ChartArea Name="ChartArea1">
                    <AxisX LineColor="Black">
                        <MajorGrid LineColor="Transparent" />
                    </AxisX>
                    <AxisY LineColor="Black">
                        <MajorGrid LineColor="Transparent" />
                    </AxisY>
                </asp:ChartArea>
            </ChartAreas>
        </asp:Chart>

        <asp:Chart ID="Chart2" runat="server" Width="600px" Height="500px">
            <Titles>
                <asp:Title Text="雷達圖2 - 只顯示線條" Font="Arial, 14pt, style=Bold" />
            </Titles>
            <Series>
                <asp:Series Name="Series1" ChartType="Radar" BorderWidth="2" BorderColor="Blue" />
            </Series>
            <ChartAreas>
                <asp:ChartArea Name="ChartArea1">
                    <AxisX LineColor="Black">
                        <MajorGrid LineColor="Transparent" />
                    </AxisX>
                    <AxisY LineColor="Black">
                        <%--<MajorGrid LineColor="Transparent" />--%>
                    </AxisY>
                </asp:ChartArea>
            </ChartAreas>
        </asp:Chart>

        <asp:Chart ID="Chart3" runat="server" Width="600px" Height="500px">
            <Titles>
                <asp:Title Text="雷達圖3" Font="Arial, 14pt, style=Bold" />
            </Titles>
            <Series>
                <asp:Series Name="Series1" ChartType="Radar" BorderWidth="2" BorderColor="Blue" />
            </Series>
            <ChartAreas>
                <asp:ChartArea Name="ChartArea1">
                    <AxisX LineColor="Black">
                        <%--<MajorGrid LineColor="Transparent" />--%>
                    </AxisX>
                    <AxisY LineColor="Black">
                        <MajorGrid LineColor="Transparent" />
                    </AxisY>
                </asp:ChartArea>
            </ChartAreas>
        </asp:Chart>

        <asp:Chart ID="Chart4" runat="server" Width="600px" Height="500px">
            <Titles>
                <asp:Title Text="雷達圖4" Font="Arial, 14pt, style=Bold" />
            </Titles>
            <Series>
                <asp:Series Name="Series1" ChartType="Radar" BorderWidth="2" BorderColor="Blue" />
            </Series>
            <ChartAreas>
                <asp:ChartArea Name="ChartArea1">
                    <AxisX LineColor="Black">
                        <%--<MajorGrid LineColor="Transparent" />--%>
                    </AxisX>
                    <AxisY LineColor="Black">
                        <%--<MajorGrid LineColor="Transparent" />--%>
                    </AxisY>
                </asp:ChartArea>
            </ChartAreas>
        </asp:Chart>

        <asp:Chart ID="Chart5" runat="server" Width="600px" Height="600px"
            BorderlineWidth="1" BorderlineColor="Black" BorderlineDashStyle="Solid" Palette="None">
            <Titles>
                <asp:Title Text="雷達圖5" Font="Arial, 14pt, style=Bold" />
            </Titles>
            <ChartAreas>
                <asp:ChartArea Name="ChartArea1" BackColor="Transparent">
                    <AxisX Interval="1">
                        <MajorGrid Enabled="False" />
                    </AxisX>
                    <AxisY Minimum="0" />
                </asp:ChartArea>
            </ChartAreas>
            <Series>
                <asp:Series Name="Series1" ChartType="Radar" BorderWidth="2" Color="Blue"
                    BackGradientStyle="None" BackSecondaryColor="Transparent"
                    CustomProperties="AreaDrawingStyle=Polygon, DrawSideBySide=False"
                    IsValueShownAsLabel="true" LabelForeColor="Black" />
            </Series>
        </asp:Chart>

        <asp:Chart ID="Chart6" runat="server" Width="600px" Height="600px"
            BorderlineWidth="1" BorderlineColor="Black" BorderlineDashStyle="Solid" Palette="None">
            <Titles>
                <asp:Title Text="雷達圖6" Font="Arial, 14pt, style=Bold" />
            </Titles>
            <ChartAreas>
                <asp:ChartArea Name="ChartArea1" BackColor="Transparent">
                    <AxisX Interval="1">
                        <MajorGrid Enabled="False" />
                    </AxisX>
                    <AxisY Minimum="0" />
                </asp:ChartArea>
            </ChartAreas>
            <Series>
                <asp:Series Name="Series1" ChartType="Radar" BorderWidth="2" BorderColor="Blue" Color="Transparent"
                    BackGradientStyle="None" BackSecondaryColor="Transparent"
                    CustomProperties="AreaDrawingStyle=Polygon, DrawSideBySide=False"
                    IsValueShownAsLabel="true" LabelForeColor="Black" />
            </Series>
        </asp:Chart>
    </form>
</body>
</html>

Default.aspx.cs

using System;
using System.Drawing;
using System.Web.UI.DataVisualization.Charting;

namespace WebApplication1
{
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                GenerateRadarChart();
            }
        }

        private void GenerateRadarChart()
        {
            // 設定 Series
            Series series = Chart1.Series["Series1"];
            series.ChartType = SeriesChartType.Radar;
            series.BorderWidth = 2;
            series.BorderColor = Color.Blue; // 設定線條顏色
            series.Color = Color.Transparent; // 使填充透明
            series.BackSecondaryColor = Color.Transparent; // 確保不會有漸層顏色
            series.BackGradientStyle = GradientStyle.None; // 移除背景漸層
            series.IsValueShownAsLabel = true; // 顯示數值標籤

            // 加入資料點 (可根據需求修改)
            series.Points.AddXY("A", 87);
            series.Points.AddXY("B", 62);
            series.Points.AddXY("C", 93);
            series.Points.AddXY("D", 54);
            series.Points.AddXY("E", 75);
            series.Points.AddXY("A", 86); // 雷達圖需要閉合

            // 設定 ChartArea (移除網格線、設定軸線)
            ChartArea chartArea = Chart1.ChartAreas["ChartArea1"];
            //chartArea.AxisX.MajorGrid.LineColor = Color.Transparent; // 隱藏 X 軸網格線
            //chartArea.AxisY.MajorGrid.LineColor = Color.Transparent; // 隱藏 Y 軸網格線

            Series series2 = Chart2.Series["Series1"];
            // 加入資料點 (可根據需求修改)
            series2.Points.AddXY("A", 87);
            series2.Points.AddXY("B", 62);
            series2.Points.AddXY("C", 93);
            series2.Points.AddXY("D", 54);
            series2.Points.AddXY("E", 75);
            series2.Points.AddXY("A", 86); // 雷達圖需要閉合
            series2.Color = Color.Transparent; // 使填充透明

            Series series3 = Chart3.Series["Series1"];
            // 加入資料點 (可根據需求修改)
            series3.Points.AddXY("A", 87);
            series3.Points.AddXY("B", 62);
            series3.Points.AddXY("C", 93);
            series3.Points.AddXY("D", 54);
            series3.Points.AddXY("E", 75);
            series3.Points.AddXY("A", 86); // 雷達圖需要閉合

            Series series4 = Chart4.Series["Series1"];
            // 加入資料點 (可根據需求修改)
            series4.Points.AddXY("A", 87);
            series4.Points.AddXY("B", 62);
            series4.Points.AddXY("C", 93);
            series4.Points.AddXY("D", 54);
            series4.Points.AddXY("E", 75);
            series4.Points.AddXY("A", 86); // 雷達圖需要閉合

            Series series5 = Chart5.Series["Series1"];
            // 加入資料點 (可根據需求修改)
            series5.Points.AddXY("A", 87);
            series5.Points.AddXY("B", 62);
            series5.Points.AddXY("C", 93);
            series5.Points.AddXY("D", 54);
            series5.Points.AddXY("E", 75);
            series5.Points.AddXY("A", 86); // 雷達圖需要閉合

            Series series6 = Chart6.Series["Series1"];
            // 加入資料點 (可根據需求修改)
            series6.Points.AddXY("A", 87);
            series6.Points.AddXY("B", 62);
            series6.Points.AddXY("C", 93);
            series6.Points.AddXY("D", 54);
            series6.Points.AddXY("E", 75);
            series6.Points.AddXY("A", 86); // 雷達圖需要閉合
        }
    }
}

下圖



********************************************************************************

(完)

相關

於

沒有留言:

張貼留言