1. 建立一個SimpleChart.aspx
2. 加入Microsoft Office Web Components參考
3. 撰寫程式碼
SimpleChart.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SimpleChart.aspx.cs"Inherits="_Default" %>
<head runat="server">
<title>未命名頁面</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Image ID="Image" runat="server" /></div>
</form>
</body>
</html>
|
SimpleChart.aspx.cs
using System;
using Microsoft.Office.Interop.Owc11;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
ChartSpace 圖表集合 = new ChartSpace();
ChChart 圖表 = 圖表集合.Charts.Add(0);
圖表.HasTitle = true;
圖表.Title.Caption = "OWC測試";
圖表.Axes[0].HasTitle = true;
圖表.Axes[0].Title.Caption = "類";
圖表.Axes[1].HasTitle = true;
圖表.Axes[1].Title.Caption = "值";
char Tab = Convert.ToChar(9);
string 類 = "A" + Tab + "B" + Tab + "C" + Tab + "D";
string 值 = "90" + Tab + "100" + Tab + "50" + Tab + "70";
圖表.SeriesCollection.Add(0);
圖表.SeriesCollection[0].SetData(ChartDimensionsEnum.chDimCategories, (int)ChartSpecialDataSourcesEnum.chDataLiteral, 類);
圖表.SeriesCollection[0].SetData(ChartDimensionsEnum.chDimValues, (int)ChartSpecialDataSourcesEnum.chDataLiteral, 值);
圖表集合.ExportPicture(MapPath("Temp.jpg"), "Gif", 400, 400);
this.Image.ImageUrl = "Temp.jpg";
}
}
|
這樣就完成了，下圖是執行的結果
現在來做程式碼的解說，SimpleChart.aspx的部分很簡單，所以就不多作說明，這一個範示只作SimpleChart.aspx.cs的說明，程式碼的變數都是用中文，相信對你在了解他是什麼用途應該會比較容易。
ChartSpace圖表集合 = new ChartSpace();
ChChart 圖表 = 圖表集合.Charts.Add(0)
|
ChartSpace是Microsoft.Office.Interop.Owc11名稱空間下的類別，他是OWC最根部的類別之一，你可以想像他是一個畫版，可以畫很多個圖，ChChart代表畫版中的圖。
這是使用三個圖的畫版範例。
圖表.HasTitle = true;
圖表.Title.Caption = "OWC測試";
圖表.Axes[0].HasTitle = true;
圖表.Axes[0].Title.Caption = "類";
圖表.Axes[1].HasTitle = true;
圖表.Axes[1].Title.Caption = "值";
|
這個部分應該是很容易了解，HasTitle表示要不要顯示標題，Title.Caption表示標題的文字是什麼，也有Font字型等屬性可以調整，Axes代表圖表的軸，設定軸要不要顯示標題，每一個圖表的軸線都不盡相同，直條圖多半都是二個軸，也有二軸以上的圖表，也有零個軸如圖餅圖，這個地方是最容易發生程式的意外(Exception)，在設計的時候別忘了檢查要圖表的類型是幾個軸的，或多或少都會產生意外喔。
char Tab = Convert.ToChar(9);
string 類 = "A" + Tab + "B" + Tab + "C" + Tab + "D";
string 值 = "90" + Tab + "100" + Tab + "50" + Tab + "70";
圖表.SeriesCollection.Add(0);
圖表.SeriesCollection[0].SetData(ChartDimensionsEnum.chDimCategories, (int)ChartSpecialDataSourcesEnum.chDataLiteral, 類);
圖表.SeriesCollection[0].SetData(ChartDimensionsEnum.chDimValues, (int)ChartSpecialDataSourcesEnum.chDataLiteral, 值);
|
Convert.ToChar(9)代表了Tab鍵的字元，VB.NET的話是使用Chr(9)，數據是由Tab鍵分隔，SeriesCollection代表的圖表的數據集合，像線性圖是可以有好幾個數據，使用SetData方法設定數據，有三個參數，第一個是數據類型，第二個是數據來源的類型，第三個這邊的話就是數據啦，類型都有列在下方，可自行參考。
ChartDimensionsEnum 可為這些 ChartDimensionsEnum 常數之一。
chDimBubbleValues
|
設定「泡泡」圖上的標記值。
|
chDimCategories
|
設定要作為類別的值。
|
chDimCharts
|
會在 HasMultipleCharts 屬性設為 True時，設定新圖表的來源欄位。
|
chDimCloseValues
|
設定「股票」圖的收盤價。
|
chDimFilter
|
設定要放置在篩選軸上的欄位。
|
chDimFormatValues
|
設定要在格式圖中使用的值。
|
chDimHighValues
|
設定「股票」圖的最高價。
|
chDimLowValues
|
設定「股票」圖的最低價。
|
chDimOpenValues
|
設定「股票」圖的開盤價。
|
chDimRValues
|
設定「極座標」圖的 R 值。
|
chDimSeriesNames
|
設定要作為數列名稱的值。
|
chDimThetaValues
|
設定「極座標」圖的「樞紐角度」值。
|
chDimValues
|
設定製成圖表的值。
|
chDimXValues
|
設定 XY（散佈圖）或「泡泡」圖的 x 值。
|
chDimYValues
|
設定 XY（散佈圖）或「泡泡」圖的 y 值。
|
ChartSpecialDataSourcesEnum 可以是這些ChartSpecialDataSourcesEnum 常數之一。
chDataBound
|
將指定的物件連結到 DataReference 引數中所指定的外部資料來源。
|
chDataLinked
|
將指定的物件連結到另一個維度。當您在Dimension 引數中指定 chDimFormatValues來建立格式圖時，請使用這個值。
|
chDataLiteral
|
將指定的物件連結到 DataReference 引數中所指定的文字資料。
|
chDataNone
|
清除指定的物件。
|
圖表集合.ExportPicture(MapPath("Temp.jpg"), "Gif", 400, 400);
this.Image.ImageUrl = "Temp.jpg";
|
現在圖表都以經設定好了，可以輸出了，輸出有二個方式：
l ExportPicture 輸出檔案
l GetPicture 輸出成Byte陣列
這邊使用ExportPicture，ExportPicture有四個參數如下表：
FileName
|
選擇性的 String。檔名和路徑。
|
FilterName
|
選擇性的 String。指定要使用的圖形副檔名的名稱。支援的副檔名名稱為 GIF、JPG 和 PNG。預設值為 GIF。
|
Width
|
選擇性的 Long 整數。指定圖形寬度（像素）。
|
Height
|
選擇性的 Long 整數。指定圖形高度（像素）。
|
在將輸出的檔案路徑，給圖型控制項就大功告成了！！，不過到這邊只能算暸解OWC的一小部分而以，他還有很多功能，值得你去摸索，下列再列出一些OWC方法，讓你的圖表更豐富。
//圖表是否顯示圖例
圖表.HasLegend = False
//輸出的圖型類型，如下方列表
圖表.Type = ChartChartTypeEnum.chChartTypeColumnClustered;
//圖表是否要顯示數據值，請加在圖表.SeriesCollection[0].SetData之後
圖表.SeriesCollection(0).DataLabelsCollection.Add()
圖表.SeriesCollection(0).DataLabelsCollection.Item(0).HasValue = True //是不是要顯示Value
圖表.SeriesCollection(0).DataLabelsCollection.Item(0).Font.Size = 10 //字體大小
圖表.SeriesCollection(0).DataLabelsCollection.Item(0).NumberFormat ="#,##0" //數字格式，這裡是加上千分位
|
沒有留言:
張貼留言