[研究]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; // 設定圓形顏色 |
********************************************************************************
(完)
相關
