Добавить диаграмму JavaScript в gridview? - PullRequest
Новая
       8

Добавить диаграмму JavaScript в gridview?

0 голосов
/ 27 августа 2018

Я сделал несколько поисков, но не нашел ничего, что могло бы мне помочь.

У меня есть простое представление сетки, которое отображает следующие данные: Sales.SalesTotal и Sales.Company. Это отлично работает.

Теперь проблема в том, что мне нужно добавить javascript диаграмму в каждую строку этого вида сетки. Было бы что-то похожее на этот пример .

Эта диаграмма javascript заполнена службой WCF, которая использует название компании (уже в gridview и SqlDataSource) в качестве параметра. Вызов 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" 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>

Любая помощь приветствуется.

Edit:

Вот как выглядит мой график 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"
    }
});

1 Ответ

0 голосов
/ 27 августа 2018

Добавить поле шаблона для рендеринга div держателя диаграммы с атрибутом data-companyId для хранения companyId: 

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

Добавьте код Jquery для поиска всех div с помощью класса css salesChart, а затем извлеките данные о продажах с помощью ajax-вызова в службу WCF с названием компании, полученным из атрибута data-company. Наконец, в случае успешного обратного вызова диаграммы инициирования вызова ajax на chartContainer div 

 $(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"
                }
            });
        });
    });
...