问是否将javascript图表添加到网格视图？
EN

Stack Overflow用户

提问于 2018-08-27 17:06:43

回答 1查看 306关注 0票数 0

我做了几次搜索，但没有找到任何可能对我有帮助的东西。

我有一个简单的网格视图，它显示以下数据：Sales.SalesTotal和Sales.Company。这可以很好地工作。

现在的问题是，我需要向该网格视图的每一行添加一个javascript图表。它将是类似to this example的东西。

这个javascript图表填充了一个WCF服务，该服务使用公司名称(已经在gridview和SqlDataSource中)作为参数。WCF调用看起来像这样：http://43.32.54.23/SalesWcf.svc/GetSales/Company，其中公司是网格视图中公司的名称。

问题是我不知道如何处理这个问题。这是我的网格视图，非常简单：

    <asp:GridView
        id="GridView_sales" runat="server" AutoGenerateColumns="false" DataSourceID="SqlDataSourceSales">
        <Columns>
            <asp:BoundField DataField="Company" HeaderText="Company" ReadOnly="True">
                <headerStyle Width="50" Font-Names="calibri"/>
                <ItemStyle Font-Names="calibri" HorizontalAlign="Center"/>
            </asp:BoundField>
            <asp:BoundField DataField="SalesTotal" HeaderText="SalesTotal" ReadOnly="True" >
                <headerStyle Width="60" Font-Names="calibri" ForeColor="#ffffff"/>
                <ItemStyle Wrap="True" 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>

任何帮助都是非常感谢的。

编辑：

这是我的amcharts图的样子：

var chart = AmCharts.makeChart("DivSalesChart", {
    "type": "serial",
    "theme": "light",
    "valueAxes": [{
        "id": "v1"
    }],
    "graphs": [
    {
        "id": "Company",
        "valueField": "sales_num"
    }],
    "categoryField": "month_name",
    "dataLoader": {
      "url": "http://43.32.54.23/SalesWcf.svc/GetSales",
      "format": "json"
    }
});

amcharts

javascript

asp.net

gridview

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-08-27 20:10:00

添加一个用于呈现图表持有者div的模板字段，该模板字段具有用于保存companyId的属性data- companyId：

<asp:TemplateField>
  <ItemTemplate>
        <div class="salesChart" data-company='<%# Eval("Company")%>'></div>
  </ItemTemplate>
</asp:TemplateField>

添加用css类salesChart查找所有div的Jquery代码，然后通过ajax调用从data-company属性获取公司名称的WCF服务来获取销售数据。最后，在chartContainer div上的ajax调用启动成功回调图表中

 $(function(){
        $('.salesChart').each(function(index, chartContainer){
            varcompanyName=$(chartContainer).attr('data-company');

             AmCharts.makeChart(chartContainer,
             {
                "type": "serial",
                "theme": "light",
                "valueAxes": [{
                    "id": "v1"
                }],
                "graphs": [{
                    "id": "Company",
                    "valueField": "sales_num"
                }],
                "categoryField": "month_name",
                "dataLoader": {
                    "url": "http://43.32.54.23/SalesWcf.svc/GetSales/"+ companyName,
                    "format": "json"
                }
            });
        });
    });