将JavaScript图表添加到asp.net gridview?

时间:2018-08-28 20:15:12

标签: javascript c# gridview visual-studio-2013 amcharts

我已经进行了几次搜索,但没有找到任何可能对我有帮助的东西。

我有一个简单的gridview,它显示以下数据:Sales.SalesTotalSales.Company。效果很好。

现在的问题是,我需要向此gridview的每一行添加一个amcharts javascript图表。它将类似于以下示例:

example

此javascript图表中填充了WCF服务,该服务使用公司名称(已经在gridviewSqlDataSource中作为参数)。 WCF调用如下所示:http://43.32.54.23/SalesWcf.svc/GetSales/Company,其中 company 是网格视图中的公司名称。

问题是我不知道该如何处理。这是我的gridview,非常简单:

    <asp:GridView
        id="GridView_sales" runat="server" AutoGenerateColumns="false" DataSourceID="SqlDataSourceSales">
        <Columns>
            <asp:BoundField DataField="Company" HeaderText="Company">
                <headerStyle Width="50"/>
                <ItemStyle Font-Names="calibri"/>
            </asp:BoundField>
            <asp:BoundField DataField="SalesTotal" HeaderText="SalesTotal">
                <headerStyle Width="60"/>
                <ItemStyle Font-Names="calibri"/>
            </asp:BoundField>
            <**** Where javascript chart goes, invoked with http://43.32.54.23/SalesWcf.svc/GetSales/Company ****/>
        </Columns>
    </asp:GridView>    
    <asp:SqlDataSource id="SqlDataSourceSales" runat="server"
        ConnectionString="Data Source=SERVER;Initial Catalog=DB;Persist Security Info=True;..."
        SelectCommand="SELECT SalesTotal, Company from Sales">
    </asp:SqlDataSource>    

这是用来绘制一个迷你图的javascript的样子:

var url = "http://43.32.54.23/SalesWcf.svc/GetSales/Amazon";
var chart = AmCharts.makeChart("SalesPattern", {
    "type": "serial",
    "valueAxes": [{
        "id": "v1"
    }],
    "graphs": [{
        "id": "g1",
        "valueField": "days"
    }],
    "categoryField": "FullDate",
    "dataLoader": {
      "url": url,
      "format": "json"
    }

});

感谢您的帮助。

0 个答案:

没有答案