ASP.net AjaxToolKit LineChart繪制系列

Question

我有以下 SqlServer 數據表：

年 | 銷售(A) | 銷售(B)
------------------------------
2000 | 38000 | 55000
2001 | 18000 | 47000
2002 | 70000 | 16000
2003 | 21000 | 55000
2004 | 77000 | 50000
2005 | 16000 | 64000
2006 | 82000 | 61000
2007 | 37000 | 16000

我需要通過在 ASP 頁面中使用 AjaxToolKit LineChart 將這些與列進行比較我有以下內容：

**

ASPX

**

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <div style="width: 100%; height: 50px">
        <h1>Ajax Database Multiline Chart Tutorial </h1>
    </div>
    <br />
    <br />
    <asp:Button ID="Button1" runat="server" Text="Generate Chart" />
    <br />
    <br />
    <div style="width: 100%; height: 500px">
        <ajaxToolkit:LineChart ID="LineChart1" runat="server" ChartType="Stacked" ChartWidth="720" Width="800px" ChartTitle="Arabian Food Supplies Annual Sales">
        </ajaxToolkit:LineChart>
    </div>
</asp:Content>

**

VB代碼

**

    Imports System.Data.SqlClient

Public Class AjaxLineChartDatabase
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load


    End Sub


    Protected Sub Compare(sender As Object, e As EventArgs) Handles Button1.Click

        Dim dt As DataTable = GetData("SELECT Years,A FROM LineChart")

        Dim x As String() = New String(dt.Rows.Count - 1) {}
        Dim y As Decimal() = New Decimal(dt.Rows.Count - 1) {}

        For i As Integer = 0 To dt.Rows.Count - 1
            x(i) = dt.Rows(i)(0).ToString()
            y(i) = Convert.ToInt32(dt.Rows(i)(1))
        Next

        LineChart1.Series.Add(New AjaxControlToolkit.LineChartSeries() With {
         .Name = "Series 1",
         .Data = y
        })



        dt = GetData("SELECT Years,B FROM LineChart")
        y = New Decimal(dt.Rows.Count - 1) {}
        For i As Integer = 0 To dt.Rows.Count - 1
            x(i) = dt.Rows(i)(0).ToString()
            y(i) = Convert.ToInt32(dt.Rows(i)(1))
        Next
        LineChart1.Series.Add(New AjaxControlToolkit.LineChartSeries() With {
         .Name = "Series 2",
         .Data = y
        })

        LineChart1.CategoriesAxis = String.Join(",", x)
        LineChart1.ChartTitle = String.Format("{0} and {1} Distribution", "S-1", "S-2")
        LineChart1.Visible = True
    End Sub



    Private Shared Function GetData(query As String) As DataTable
        Dim dt As New DataTable()
        Dim constr As String = ConfigurationManager.ConnectionStrings("ChartsConnectionString").ConnectionString
        Using con As New SqlConnection(constr)
            Using cmd As New SqlCommand(query)
                Using sda As New SqlDataAdapter()
                    cmd.CommandType = CommandType.Text
                    cmd.Connection = con
                    sda.SelectCommand = cmd
                    sda.Fill(dt)
                End Using
            End Using
            Return dt
        End Using
    End Function
End Class

繪制圖表時出現的問題，第一個系列（A）顯示正常，但第二個系列（B）值顯示為 A+B

樣本 ： 為什么我會這樣？

Answer 1

我的理論是數組剛剛被追加。 *注意，我們可能需要單獨的數組，因為它是在代碼之后呈現的。

嘗試這個，

        dt = GetData("SELECT Years,A, B FROM LineChart")
        y = New Decimal(dt.Rows.Count - 1) {}
        y2 = New Decimal(dt.Rows.Count - 1) {}
        For i As Integer = 0 To dt.Rows.Count - 1
            x(i) = dt.Rows(i)(0).ToString()
            y(i) = Convert.ToInt32(dt.Rows(i)(1))
            y2(i) = Convert.ToInt32(dt.Rows(i)(2))
        Next
        LineChart1.Series.Add(New AjaxControlToolkit.LineChartSeries() With {
         .Name = "Series 2",
         .Data = y
        })
        LineChart1.Series.Add(New AjaxControlToolkit.LineChartSeries() With {
         .Name = "Series 2",
         .Data = y2
        })
        LineChart1.CategoriesAxis = String.Join(",", x)
        LineChart1.ChartTitle = String.Format("{0} and {1} Distribution", "S-1", "S-2")
        LineChart1.Visible = True

Answer 2

我已經解決了這個問題：它來自ChartType屬性。

問題：

   <div style="width: 100%; height: 500px">
    <ajaxToolkit:LineChart ID="LineChart1" runat="server" ChartType="Stacked" ChartWidth="720" Width="800px" ChartTitle="Sales">
    </ajaxToolkit:LineChart>

解決方案 ：

<div style="width: 100%; height: 500px">
    <ajaxToolkit:LineChart ID="LineChart1" runat="server" ChartType="Basic" ChartWidth="720" Width="800px" ChartTitle="Sales">
    </ajaxToolkit:LineChart>