[ASP.net] 關於ASP.net Chart Radar圖 的一些小東西(線的顏色、最大值、刻度消失)
2013-06-25
最近在做一些外面的專案，對方需要統計一堆的圖，我才發現原來，ASP.net Chart 超級強大，但是太多枚枚角角
不記錄一下一定會忘記，拉入一個Chart 後調整type 為 Radar .
再來，我們在Series 中加入一些Points 這就是來達圖的維度.
加入後預覽圖會長這樣
接下來我們匯入資料
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);
結果:
當然這張圖，很理所當然的被打槍了..因為不好看所以做些修改.
修改圓圈的顏色還有中間直線線條的顏色，還有線條粗細:
因為是sample 所以我改兩個差異很大的顏色，跟我的美感無關
//設定線的粗細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.ChartAreas[0].AxisY.Maximum = 5;
結果:
最後程式碼:
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又在那邊找個老半天..