MicroSoft Chart Control 雷達圖使用

2013-06-27

3337
0

MicroSoft Chart Control

前幾天收到目前專案的使用者希望有雷達圖分析功能

原本想要用Reporting Service來做，但 Reporting Service supporter發現他們的雷達圖好像不能以線段表示
所以還在Survey當中，但因為專案進度迫在眉睫
所以我找到了MicroSoft Chart Control
MicroSoft Chart Control 必須要在 .Net FrameWork 3.5 SP1下運作
之前沒有用過這功能
所以試試看可不可以做出我想要的樣子

需求

使用者想做出像這樣的圖
根據不同類型算出不同類型的平均分數
主要有三條線是根據不同角色來分別取得平均分
此三個角色會在旁邊註明角色名稱

我所做出的成果

aspx前端程式

其中比較重要的是
1.<series>區塊決定你總共要在雷達圖中顯示幾條線，線的顏色，線的樣式
2.<legends>區塊式說明此三條線的作用，也是在這裡設定出現的位置X軸、Y軸

後端程式碼


protected void Page_Load(object sender, EventArgs e)
    {
        // Populate series data

        double[] yValues = { 1.05, 2.0, 3.5, 2.5, 2.5, 3.0, 4.0, 4.5, 5.00 };
        string[] xValues = { "AAAAA", "BBBBBBBB", "CCCCCCCCC", "DDDDDDDDD", "EEEEEEEEE", "FFFFFF", "GGGGGGGGG", "HHHHHHHH", "IIIIIIIII" };
        Chart1.Series["Series1"].Points.DataBindXY(xValues, yValues);


        // Set radar chart type
        //Chart1.Series["Series1"].ChartType = SeriesChartType.Radar;
        // Set radar chart style (Area, Line or Marker)
        Chart1.Series["Series1"]["RadarDrawingStyle"] = "Line";
        // Set circular area drawing style (Circle or Polygon)
        Chart1.Series["Series1"]["AreaDrawingStyle"] = "Polygon";
        // Set labels style (Auto, Horizontal, Circular or Radial)
        Chart1.Series["Series1"]["CircularLabelsStyle"] = "Horizontal";

        Chart1.Series["Series1"].LegendText = "AAAAAAAAAAAAAAAAA";
        // Show as 3D
        Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = false;
        // Populate series data
        double[] yValues2 = { 2.05, 3.0, 4.5, 3.5, 1.5, 2.0, 3.0, 2.5, 1.00 };

        Chart1.Series["Series2"].Points.DataBindXY(xValues,yValues2 );
        //// Set radar chart type
        //Chart1.Series["Series2"].ChartType = SeriesChartType.Radar;
        //// Set radar chart style (Area, Line or Marker)
        Chart1.Series["Series2"]["RadarDrawingStyle"] = "Line";
        //// Set circular area drawing style (Circle or Polygon)
        Chart1.Series["Series2"]["AreaDrawingStyle"] = "Polygon";
        //// Set labels style (Auto, Horizontal, Circular or Radial)
        Chart1.Series["Series2"]["CircularLabelsStyle"] = "Horizontal";

        Chart1.Series["Series2"].LegendText = "BBBBBBBBBBBBBBBB";
        // Populate series data
        double[] yValues3 = { 4.05, 5.0, 2.5, 1.5, 3.5, 2.0, 5.0, 3.5, 2.00 };

        Chart1.Series["Series3"].Points.DataBindXY(xValues, yValues3);
        //// Set radar chart type
        //Chart1.Series["Series2"].ChartType = SeriesChartType.Radar;
        //// Set radar chart style (Area, Line or Marker)
        Chart1.Series["Series3"]["RadarDrawingStyle"] = "Line";
        //// Set circular area drawing style (Circle or Polygon)
        Chart1.Series["Series3"]["AreaDrawingStyle"] = "Polygon";
        //// Set labels style (Auto, Horizontal, Circular or Radial)
        Chart1.Series["Series3"]["CircularLabelsStyle"] = "Horizontal";

        Chart1.Series["Series3"].LegendText = "CCCCCCCCCCCCCCCCCCCCC";


    }

其中比較重要的是
1.<string[] xValues = { "AAAAA", "BBBBBBBB", "CCCCCCCCC..................是設定總共有哪些類別
2.double[] yValues1、yValues2、yValues3 是三條線的各個角色平均值
3.["RadarDrawingStyle"] 是以線條呈現或是以實心區塊呈現
4.["AreaDrawingStyle"]是表現雷達圖是圓形或是多邊形
5.["CircularLabelsStyle"]是環繞外圍每個類別的說明文字是以平行顯示或垂直顯示

回首頁