[ASP.net] 關於ASP.net Chart Radar圖 的一些小東西(線的顏色、最大值、刻度消失)

2013-06-25

最近在做一些外面的專案,對方需要統計一堆的圖,我才發現原來,ASP.net Chart 超級強大,但是太多枚枚角角

不記錄一下一定會忘記,拉入一個Chart 後調整type 為 Radar .

2013-06-25_105910

再來,我們在Series 中加入一些Points 這就是來達圖的維度.

2013-06-25_110601

2013-06-25_110643

加入後預覽圖會長這樣

2013-06-25_114600

接下來我們匯入資料

Chart1.Series[0].Points[0].SetValueY(5);
Chart1.Series[0].Points[1].SetValueY(4);
Chart1.Series[0].Points[2].SetValueY(3);
Chart1.Series[0].Points[3].SetValueY(2);
Chart1.Series[0].Points[4].SetValueY(1);

結果:

111111ChartImg
當然這張圖,很理所當然的被打槍了..因為不好看所以做些修改.


修改圓圈的顏色還有中間直線線條的顏色,還有線條粗細:
因為是sample 所以我改兩個差異很大的顏色,跟我的美感無關

//設定線的粗細
Chart1.ChartAreas[0].AxisY.LineWidth = 1;
 
//設定圓線的顏色
Chart1.ChartAreas[0].AxisY.MajorGrid.LineColor = Color.Purple;
 
 
//設定中間線的顏色
Chart1.ChartAreas[0].AxisY.LineColor = Color.Red;

結果:

改變顏色

我把線的粗細做過調整後,並不會像預設會有齒角的狀況…

將中間的小刻度拿掉:
你會看中中間有一個小刻度

2013-06-25_115740 

很醜,所以要將它拿掉

//中間的小刻度
Chart1.ChartAreas[0].AxisY.MajorTickMark.Enabled = false;

結果:

拿掉小刻度 

是不是感覺好一點..

設定最大值 :

因為給的數值最大值是五 但是預設他最大值會多一個刻度到六,老闆不愛,所以要再修正

//設定最大刻度 此案例如果沒有設定最大會到六
Chart1.ChartAreas[0].AxisY.Maximum = 5;

結果:

Final

最後程式碼:

ASPX:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestRadarMaxValue.aspx.cs" Inherits="ReportTest.TestRadarMaxValue" %>
 
<%@ 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">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Chart ID="Chart1" runat="server">
            <Series>
                <asp:Series Name="Series1" ChartType="Radar">
                    <Points>
                        <asp:DataPoint Label="能力" YValues="0"  />
                        <asp:DataPoint Label="速度" YValues="0" />
                        <asp:DataPoint Label="力量" YValues="0" />
                        <asp:DataPoint Label="智商" YValues="0" />
                        <asp:DataPoint Label="配合能力" YValues="0" />
                    </Points>
                </asp:Series>
            </Series>
            <ChartAreas>
                <asp:ChartArea Name="ChartArea1"></asp:ChartArea>
            </ChartAreas>
        </asp:Chart>
    </div>
    </form>
</body>
</html>

C#:

using System;
using System.Drawing;
 
namespace ReportTest
{
    public partial class TestRadarMaxValue : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            //設定線的粗細
            Chart1.ChartAreas[0].AxisY.LineWidth = 1;
 
            //設定圓線的顏色
            Chart1.ChartAreas[0].AxisY.MajorGrid.LineColor = Color.Purple;
 
 
            //設定中間線的顏色
            Chart1.ChartAreas[0].AxisY.LineColor = Color.Red;
 
            //中間的小刻度
            Chart1.ChartAreas[0].AxisY.MajorTickMark.Enabled = false;
 
 
            Chart1.Series[0].Points[0].SetValueY(5);
            Chart1.Series[0].Points[1].SetValueY(4);
            Chart1.Series[0].Points[2].SetValueY(3);
            Chart1.Series[0].Points[3].SetValueY(2);
            Chart1.Series[0].Points[4].SetValueY(1);
           
 
            //Chart1.Width = 500;
 
            //設定最大刻度 此案例如果沒有設定最大會到六
            Chart1.ChartAreas[0].AxisY.Maximum = 5;
        }
    }
}

做個筆記,給需要的人,或是我下次需要用到在那邊try又在那邊找個老半天..


當麻許的超技八 2014 | Donma Hsu Design.