2025年3月4日 星期二

[研究]ASP.NET, WebForm, Chart 雷達圖測試(三)多邊形、不填色、不顯示Y軸線

[研究]ASP.NET, WebForm, Chart 雷達圖測試(三)多邊形、不填色、不顯示Y軸線

2025-03-04

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

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

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

Default3.aspx

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

<!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">
            <Titles>
                <asp:Title Text="雷達圖1" Font="Arial, 14pt, style=Bold" />
            </Titles>
            <Series>
                <asp:Series Name="Series1" ChartType="Radar">
                </asp:Series>
            </Series>
            <ChartAreas>
                <asp:ChartArea Name="ChartArea1">
                </asp:ChartArea>
            </ChartAreas>
        </asp:Chart>
        
        <asp:Chart ID="Chart2" runat="server"
            Width="400px" Height="400px"
            BorderlineWidth="1" BorderlineColor="Black" BorderlineDashStyle="Solid" Palette="None">
            <%--雷達圖外框線、填色 BorderlineWidth="1" BorderlineColor="Black" BorderlineDashStyle="Solid" Palette="None" --%>
            <Titles>
                <asp:Title Text="雷達圖2" Font="Arial, 14pt, style=Bold" />
            </Titles>
            <ChartAreas>
                <asp:ChartArea Name="ChartArea1">
                   <AxisY LineWidth="0">
                        <MajorTickMark LineWidth="0" /> <%--Y軸不要顯示主要刻度標記--%>
                        <%--AxisY 的 LineWidth 是圓心拉出的線，0表示不畫那條線 --%>
                        <%--AxisY 的 MajorGrid 是繞著圓心的主要線 (圓形線、多邊形線或其他) --%>
                        <%--AxisY 的 MinorGrid 是繞著圓心的主要線 (圓形線、多邊形線或其他) --%>
                        <MajorGrid Enabled="true" LineColor="Orange" />
                    </AxisY>
                </asp:ChartArea>
            </ChartAreas>
            <%--Series 是資料區域--%>
            <Series>
                <%--AreaDrawingStyle=Polygon 是把資料用多邊形線連起來
                BorderWidth="3" BorderColor="Blue" 表連起來的線是藍色、線粗 3 pixels
                Color="Transparent" 表示多邊形內部不填色
                IsValueShownAsLabel="true" 表示顯示資料數值
                LabelForeColor="Red" 表示顯示資料數值用紅色
                --%>
                <asp:Series Name="Series1" ChartType="Radar"
                    CustomProperties="AreaDrawingStyle=Polygon, DrawSideBySide=False"
                    BorderWidth="3" BorderColor="Blue" Color="Transparent"
                    IsValueShownAsLabel="true" LabelForeColor="Red" >
                </asp:Series>
            </Series>
        </asp:Chart>
    </form>
</body>
</html>

Default3.aspx.cs

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

namespace WebApplication1
{
    public partial class Default3 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                GenerateRadarChart();
            }
        }
        private void GenerateRadarChart()
        {
            Series series = Chart1.Series["Series1"];
            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", 87); // 雷達圖需要閉合

            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", 87); // 雷達圖需要閉合
        }
    }
}

下圖

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

增加一行 CODE，右上圖的字母旁黑短線 (主要刻度標記) 就可以消失

                   <AxisY LineWidth="0">
                        <MajorTickMark LineWidth="0" /> <%--Y軸不要顯示主要刻度標記--%>

下圖

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

補充：加大資料數值 (ASPX)

<Series>
        <asp:Series Name="Series1" IsValueShownAsLabel="True" />
    </Series>

改為

<Series>
        <asp:Series Name="Series1" IsValueShownAsLabel="True" Font="Arial, 14pt, style=Bold" />
    </Series>

或 (C#)

Chart1.Series["Series1"].IsValueShownAsLabel = true;
Chart1.Series["Series1"].Font = new System.Drawing.Font("Arial", 14, System.Drawing.FontStyle.Bold);


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

補充：資料點 (ASPX)

<asp:Chart ID="Chart1" runat="server" Width="600px" Height="400px">
    <Series>
        <asp:Series Name="Series1" 
            IsValueShownAsLabel="True" 
            MarkerStyle="Circle" 
            MarkerSize="8" 
            MarkerColor="Blue" />
    </Series>
    <ChartAreas>
        <asp:ChartArea Name="ChartArea1" />
    </ChartAreas>
</asp:Chart>


或 (C#)

Chart1.Series["Series1"].IsValueShownAsLabel = true;

// 設定資料點標記為圓形
Chart1.Series["Series1"].MarkerStyle = System.Web.UI.DataVisualization.Charting.MarkerStyle.Circle;
Chart1.Series["Series1"].MarkerSize = 8; // 調整圓形大小
Chart1.Series["Series1"].MarkerColor = System.Drawing.Color.Blue; // 設定圓形顏色


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

(完)

相關

張貼者： 於
標籤： , , , , , , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)