傑特_資訊手札

新增Chart Control

Visual Studio 2008 web.config加入MSChart的元件 (.Net Framework 3.5)

<configuration>
  <appSettings>
    <add key="ChartImageHandler" value="storage=file;timeout=20;url=~\images\chartTemporary\;" />
  </appSettings>

  <system.webServer>
    <handlers>
      <remove name="ChartImageHandler" />
      <add name="ChartImageHandler" preCondition="integratedMode" verb="POST,GET,HEAD" path="ChartImg.axd" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
    </handlers>
  </system.webServer>

  <system.web>
    <httpHandlers>
       <add path="ChartImg.axd" verb="GET,HEAD,POST" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>
    </httpHandlers>
  </system.web>

  <pages validateRequest="false" enableEventValidation="false" enableViewStateMac="true">
    <controls>
      <add tagPrefix="asp" namespace="System.Web.UI.DataVisualization.Charting" assembly="System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
    </controls>
  </pages>

  <compilation debug="true">
    <assemblies>
       <add assembly="System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
    </assemblies>
  </compilation>
</configuration>

參考來源：http://www.dotblogs.com.tw/shunnien/archive/2013/04/15/101651.aspx

前台

<asp:Chart ID="Chart1" runat="server" ImageStorageMode="UseImageLocation" Visible="false" Width="720px" ImageLocation="~/images/chartTemporary/ChartPic_#SEQ(300,3)">
       <Series>
            <asp:Series Name="Series1">
            </asp:Series>
        </Series>
        <ChartAreas>
            <asp:ChartArea Name="ChartArea1">
            </asp:ChartArea>
        </ChartAreas>
</asp:Chart>

ImageLocation :暫存圖檔位置及檔案名稱設定。
ChartPic_#SEQ(300,3)的規則為300張圖片為一個循環。

參考來源：
http://www.4guysfromrolla.com/articles/081909-1.aspx
http://www.dotblogs.com.tw/shadow/archive/2011/03/10/21762.aspx

後台


Private Sub CreateChart(ByVal dt As DataTable)
        '資料來源為DataTable(欄位名稱MyDateTime及Count)
        ' xValues:MyDateTime , yValues:Count
        For Each row As DataRow In dt.Rows
            Dim intPointidx As Integer
            '新增該筆資料的XY值，並取得該值的idx
            intPointidx = Chart1.Series("Series1").Points.AddXY(row("DateTime").ToString(), row("Count"))
            '利用idx顯示該值的ToolTip
            Chart1.Series("Series1").Points(intPointidx).ToolTip = row("MyDateTime") & "\n" & row("Count")
            '設定Marker
            Chart1.Series("Series1").Points(intPointidx).MarkerColor = Color.FromArgb(62, 151, 201)
            Chart1.Series("Series1").Points(intPointidx).MarkerStyle = MarkerStyle.Circle
            Chart1.Series("Series1").Points(intPointidx).MarkerSize = 10
        Next
     
         '增加圖示
        Chart1.Legends.Add("Legends1")
        Chart1.Legends("Legends1").BackHatchStyle = DataVisualization.Charting.ChartHatchStyle.DarkDownwardDiagonal
        Chart1.Legends("Legends1").BorderWidth = 1
        Chart1.Legends("Legends1").BorderColor = Color.FromArgb(200, 200, 200)
        Chart1.Legends("Legends1").Docking = Docking.Top
     
        '設定X軸及Y軸
        Chart1.ChartAreas("ChartArea1").AxisY.ScaleBreakStyle.CollapsibleSpaceThreshold = 20
        Chart1.ChartAreas("ChartArea1").AxisY.ScaleBreakStyle.LineColor = Color.Red
        Chart1.ChartAreas("ChartArea1").AxisY.LabelStyle.Font = New System.Drawing.Font("Arial", 9, System.Drawing.FontStyle.Regular)
        Chart1.ChartAreas("ChartArea1").BackGradientStyle = DataVisualization.Charting.GradientStyle.VerticalCenter
        Chart1.ChartAreas("ChartArea1").Area3DStyle.Enable3D = False
        Chart1.ChartAreas("ChartArea1").AxisX.LabelStyle.Font = New System.Drawing.Font("Arial", 9, System.Drawing.FontStyle.Regular)
        Chart1.ChartAreas("ChartArea1").AxisX.Enabled = DataVisualization.Charting.AxisEnabled.True
        Chart1.ChartAreas("ChartArea1").AxisY.Minimum = 0
        Chart1.ChartAreas("ChartArea1").AxisX.MajorGrid.Enabled = False
        Chart1.ChartAreas("ChartArea1").AxisY.MajorGrid.Enabled = True
        Chart1.ChartAreas("ChartArea1").AxisY.MajorGrid.LineColor = Color.FromArgb(150, 150, 150)
        Chart1.ChartAreas("ChartArea1").AxisX.MajorGrid.LineColor = Color.FromArgb(150, 150, 150)
        Chart1.ChartAreas("ChartArea1").AxisX.IntervalAutoMode = DataVisualization.Charting.IntervalAutoMode.VariableCount
        Chart1.ChartAreas("ChartArea1").AxisX.IsLabelAutoFit = True
        Chart1.ChartAreas("ChartArea1").AxisX.LabelStyle.IsStaggered = True
        '把圖表的左右兩邊空白去除
        Chart1.ChartAreas("ChartArea1").AxisX.IsMarginVisible = False
        '設定X軸間距
        Chart1.ChartAreas("ChartArea1").AxisX.Interval = 1
        '設定Y軸間距
         Chart1.ChartAreas("ChartArea1").AxisY.Interval = 1
        Chart1.Series("Series1").IsValueShownAsLabel = False
        Chart1.Series("Series1").LegendText = "DateTime"
        Chart1.Series("Series1").Font = New System.Drawing.Font("Arial", 9, System.Drawing.FontStyle.Regular)
        Chart1.Series("Series1").ChartType = SeriesChartType.Line
        Chart1.Series("Series1").BorderWidth = 3
        Chart1.Series("Series1").BorderColor = Color.FromArgb(62, 151, 201)
    End Sub


參考資料：
1.http://www.dotblogs.com.tw/suehilary/archive/2011/10/22/45430.aspx
2.http://www.dotblogs.com.tw/shunnien/archive/2013/04/22/102049.aspx
3.http://www.dotblogs.com.tw/mrkt/archive/2008/11/28/6116.aspx
4.http://blog.xuite.net/fenctang/twblog/137597590-asp.net+c%23+MSChart+
http://nickmason.lionfree.net/blog/117/%E5%A5%BD%E7%94%A8%E7%9A%84%E5%9C%96%E8%A1%A8%E5%B7%A5%E5%85%B7-microsoft-chart-control/
5.http://fecbob.pixnet.net/blog/post/38851855-asp.net%E8%B3%87%E6%96%99%E6%8E%A7%E5%88%B6%E9%A0%85%E4%B9%8Bchart%E7%9A%84%E7%94%A8%E6%B3%95
6.http://xpower2888.pixnet.net/blog/post/149675162-ms-chart-%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E6%96%B9%E6%B3%95
7.http://www.dotblogs.com.tw/nobel12/archive/2009/10/22/11206.aspx
8.http://www.blueshop.com.tw/board/FUM20041006161839LRJ/BRD20110304093353IHH.html