Member 7909353 Ответов: 1

Как реализовать штабелированную гистограмму с использованием высоких диаграмм в ASP.NET

У меня есть таблица со следующими записями
Где Статус Один для всех применений,В для действительного применения
и Я для поврежденных приложения

<pre><table>
        <tr>
            <td>
                StateName
            </td>

            <td>
                AppType

            </td>
            <td>
                Count

            </td>
            <td>
                AppStatus

            </td>

        </tr>
        <tr>
            <td>UP</td>
            <td>IND</td>
            <td>10</td>
            <td>V</td>
        </tr>
        <tr>
            <td>UP</td>
            <td>IND</td>
            <td>20</td>
            <td>I</td>
        </tr>
        <tr>
            <td>UP</td>
            <td>IND</td>
            <td>30</td>
            <td>A</td>
        </tr>
        <tr>
            <td>UP</td>
            <td>INF</td>
            <td>5</td>
            <td>V</td>
        </tr>
        <tr>
            <td>UP</td>
            <td>INF</td>
            <td>15</td>
            <td>I</td>
        </tr>
        <tr>
            <td>UP</td>
            <td>INF</td>
            <td>20</td>
            <td>A</td>
        </tr>
        <tr>
            <td>UP</td>
            <td>MIN</td>
            <td>6</td>
            <td>V</td>
        </tr>
        <tr>
            <td>UP</td>
            <td>MIN</td>
            <td>16</td>
            <td>I</td>
        </tr>
        <tr>
            <td>UP</td>
            <td>MIN</td>
            <td>22</td>
            <td>A</td>
        </tr>
        <tr>
            <td>MP</td>
            <td>IND</td>
            <td>10</td>
            <td>V</td>
        </tr>
        <tr>
            <td>MP</td>
            <td>IND</td>
            <td>20</td>
            <td>I</td>
        </tr>
        <tr>
            <td>MP</td>
            <td>IND</td>
            <td>30</td>
            <td>A</td>
        </tr>
        <tr>
            <td>MP</td>
            <td>INF</td>
            <td>5</td>
            <td>V</td>
        </tr>
        <tr>
            <td>MP</td>
            <td>INF</td>
            <td>15</td>
            <td>I</td>
        </tr>
        <tr>
            <td>MP</td>
            <td>INF</td>
            <td>20</td>
            <td>A</td>
        </tr>
        <tr>
            <td>MP</td>
            <td>MIN</td>
            <td>100</td>
            <td>V</td>
        </tr>
        <tr>
            <td>MP</td>
            <td>MIN</td>
            <td>100</td>
            <td>I</td>
        </tr>
        <tr>
            <td>MP</td>
            <td>MIN</td>
            <td>200</td>
            <td>A</td>
        </tr>
    </table>




Я хочу сделать высокие графики, как показано ниже
Базовый бар | Highcharts[^]

Что я уже пробовал:

В c#

private void GetMainChartStateWiseAppCountForAll()
   {

   public StringBuilder Str_StateWiseAppCountINDA = new StringBuilder();   //IND all
   public StringBuilder Str_StateWiseAppCountINFA = new StringBuilder();   //INF all
   public StringBuilder Str_StateWiseAppCountMINA = new StringBuilder();   //MIN all

   public StringBuilder Str_StateWiseAppCountINDV = new StringBuilder();   //IND valid
   public StringBuilder Str_StateWiseAppCountINFV = new StringBuilder();   //INF valid
   public StringBuilder Str_StateWiseAppCountMINV = new StringBuilder();   //MIN valid

   public StringBuilder Str_StateWiseAppCountINDI = new StringBuilder();   //IND invalid
   public StringBuilder Str_StateWiseAppCountINFI = new StringBuilder();   //INF invalid
   public StringBuilder Str_StateWiseAppCountMINI = new StringBuilder();   //MIN invalid

   public string Str_StateWiseAppCountINDColor = "rgb(255, 144, 80)";      //for IND stack color
   public string Str_StateWiseAppCountINFColor = "rgb(9, 78, 127)";        //for INF stack color
   public string Str_StateWiseAppCountMINColor = "rgb(9, 78, 0)";      //for MIN stack color
   public StringBuilder Str_Category = new StringBuilder();            //FOR XAXIS CATEGORY ARRAY
       try
       {
           StateWiseAppCountForAll obj_stateWiseAppCount = new StateWiseAppCountForAll();

           List<StateWiseAppCountForAll> list_tempStateWiseAppCountBLL = null;
           list_tempStateWiseAppCountBLL = obj_stateWiseAppCount.GetAll();
           if (list_tempStateWiseAppCountBLL != null)
           {
               List<string> tempString = new List<string>();
               for (int i = 0; i < list_tempStateWiseAppCountBLL.Count; i++)
               {
                   if(tempString.Contains(list_tempStateWiseAppCountBLL[i].categories))
                   tempString.Add(list_tempStateWiseAppCountBLL[i].categories);
               }



               StringBuilder sb = new StringBuilder();
               sb.Append("<script>");
               sb.Append("var testArray = new Array;");
               foreach (string str in tempString)
               {
                   sb.Append("testArray.push('" + str + "');");
               }
               sb.Append("</script>");
               ClientScript.RegisterStartupScript(this.GetType(), "TestArrayScript", sb.ToString());


               Str_StateWiseAppCountINDA.Append(new JavaScriptSerializer().Serialize(list_tempStateWiseAppCountBLL.Where(c => c.AppTypeCode == Convert.ToInt32(ApplicationTypeOption.IND) && c.Flage == 'A').ToList()));
               if (Str_StateWiseAppCountINDA.ToString() == "")
                   Str_StateWiseAppCountINDA.Append("''");
               Str_StateWiseAppCountINFA.Append(new JavaScriptSerializer().Serialize(list_tempStateWiseAppCountBLL.Where(c => c.AppTypeCode == Convert.ToInt32(ApplicationTypeOption.INF) && c.Flage == 'A').ToList()));
               if (Str_StateWiseAppCountINFA.ToString() == "")
                   Str_StateWiseAppCountINFA.Append("''");
               Str_StateWiseAppCountMINA.Append(new JavaScriptSerializer().Serialize(list_tempStateWiseAppCountBLL.Where(c => c.AppTypeCode == Convert.ToInt32(ApplicationTypeOption.MIN) && c.Flage == 'A').ToList()));
               if (Str_StateWiseAppCountMINA.ToString() == "")
                   Str_StateWiseAppCountMINA.Append("''");




               Str_StateWiseAppCountINDV.Append(new JavaScriptSerializer().Serialize(list_tempStateWiseAppCountBLL.Where(c => c.AppTypeCode == Convert.ToInt32(ApplicationTypeOption.IND) && c.Flage == 'V').ToList()));
               if (Str_StateWiseAppCountINDV.ToString() == "")
                   Str_StateWiseAppCountINDV.Append("''");
               Str_StateWiseAppCountINFV.Append(new JavaScriptSerializer().Serialize(list_tempStateWiseAppCountBLL.Where(c => c.AppTypeCode == Convert.ToInt32(ApplicationTypeOption.INF) && c.Flage == 'V').ToList()));
               if (Str_StateWiseAppCountINFV.ToString() == "")
                   Str_StateWiseAppCountINFV.Append("''");
               Str_StateWiseAppCountMINV.Append(new JavaScriptSerializer().Serialize(list_tempStateWiseAppCountBLL.Where(c => c.AppTypeCode == Convert.ToInt32(ApplicationTypeOption.MIN) && c.Flage == 'V').ToList()));
               if (Str_StateWiseAppCountMINV.ToString() == "")
                   Str_StateWiseAppCountMINV.Append("''");




               Str_StateWiseAppCountINDI.Append(new JavaScriptSerializer().Serialize(list_tempStateWiseAppCountBLL.Where(c => c.AppTypeCode == Convert.ToInt32(ApplicationTypeOption.IND) && c.Flage == 'I').ToList()));
               if (Str_StateWiseAppCountINDI.ToString() == "")
                   Str_StateWiseAppCountINDI.Append("''");
               Str_StateWiseAppCountINFI.Append(new JavaScriptSerializer().Serialize(list_tempStateWiseAppCountBLL.Where(c => c.AppTypeCode == Convert.ToInt32(ApplicationTypeOption.INF) && c.Flage == 'I').ToList()));
               if (Str_StateWiseAppCountINFI.ToString() == "")
                   Str_StateWiseAppCountINFI.Append("''");
               Str_StateWiseAppCountMINI.Append(new JavaScriptSerializer().Serialize(list_tempStateWiseAppCountBLL.Where(c => c.AppTypeCode == Convert.ToInt32(ApplicationTypeOption.MIN) && c.Flage == 'I').ToList()));
               if (Str_StateWiseAppCountMINI.ToString() == "")
                   Str_StateWiseAppCountMINI.Append("''");
           }
       }
       catch (Exception ex)
       {
       }
   }




На странице aspx

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <script src="jquery.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="../../../css/Chart/bootstrap.min.css" />
    <link href="jquery-ui.css" rel="stylesheet" type="text/css" />
    <link href="keen-dashboards.css" rel="stylesheet" type="text/css" />

    <script src="HighChart/jquery-1.11.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="bootstrap.min.js"></script>
    <script type="text/javascript" src="Scripts/holder.js"></script>
    <script type="text/javascript">
        Holder.add_theme("white", { background: "#fff", foreground: "#a7a7a7", size: 10 });
    </script>
    <script src="highcharts.js" type="text/javascript"></script>
    <script src="highcharts-more.js" type="text/javascript"></script>
    <script src="highcharts-3d.js" type="text/javascript"></script>
    <script src="exporting.js" type="text/javascript"></script>

    <script src="drilldown.js" type="text/javascript"></script>
    <script src="data.js" type="text/javascript"></script>
    <script src="jquery-ui.min.js" type="text/javascript"></script>

   
    <script type="text/javascript">
        $(document).ready(function () {
            Highcharts.setOptions(
                   {
                      colors: ['#094e7f ', '#D92525', '#63A01F', '#FCB711', '#FD5E1E', '#6460AA', '#677300', '#CC004C', '#005391', '#8A1525', '#3C4C00', '#0E3D59']
                    });
            
            MainChartStateWiseAppCountHori();
        });     

        function MainChartStateWiseAppCountHori() {
            if (testArray)
            {
                // do something with testArray
        
                var cat = [];
                var data=testArray  ;
                //                alert(data);
                data.forEach(function(item) {
                    // alert(item);
                    cat.push(item);

                });
            }


            Highcharts.chart('MainChartStateWiseAppCount', {
                chart: {
                    type: 'bar',
                    
                }, //chart
                    
                title: {
                    align: 'center',
                    text: 'State Wise Application Count For New NOC',
                    style: '{ "color": "#214900" }'


                } //title
                   , xAxis: {
                       type:'categories',
                       categories:cat,
                       title: {
                           text: 'States Name'
                       }
                   
                   } //xAxis
                   ,
                yAxis: {
                    min: 0,
                    //                    type: 'category',
                    title: {
                        text: 'Total Application'
                    },
                   
                    stackLabels: {
                        enabled: true,
                        style: {
                            fontWeight: 'bold', color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                        }
                    }
                }//yAxis
                    , 
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -40,
                    y: 80,
                    floating: true,
                    borderWidth: 1,
                    backgroundColor:
                        Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',
                    shadow: true
                },
                tooltip: {
                    animation: true,
                    shadow: true,
                    
                    headerFormat: '', pointFormat: '{point.FullName}<br/>{series.name}: {point.y}<br/>Total: {point.stackTotal}'
                },
                credits: {
                    enabled: false
                },
                plotOptions: {
                    bar: {
                        dataLabels: {
                            enabled: true
                        }
                    },
                   
                    series: {
                        animation: {
                            duration: 2000
                        },
                        stacking:'normal'
                    }
                }                   
                ,series: [                  

                                    {       name: 'Industrial',color:'<%= Str_StateWiseAppCountINDColor.ToString() %>', 
                                        data: <%= Str_StateWiseAppCountINDA.ToString() %>
                                        ,stack:'ALL'  

                                    }
                                            
                                            ,{
                                                name: 'Infrastructure',  color:'<%= Str_StateWiseAppCountINFColor.ToString() %>', 
                                                data: <%= Str_StateWiseAppCountINFA.ToString() %>  
                                                ,stack:'ALL'      
                                            } 
                                            
                                            
                                            ,{
                                                name: 'Mining',  color:'<%= Str_StateWiseAppCountMINColor.ToString() %>',
                                                data: <%= Str_StateWiseAppCountMINA.ToString() %>
                                                ,stack:'ALL' 
                                            }   
                                            
                                            
                                            
                                            ,   {       name: 'BeforeExpire',color:'<%= Str_StateWiseAppCountINDColor.ToString() %>', 
                                                data: <%= Str_StateWiseAppCountINDV.ToString() %>
                                                ,stack:'BeforeExpire'     

                                            }
                                            
                                            ,{
                                                name: 'BeforeExpire',  color:'<%= Str_StateWiseAppCountINFColor.ToString() %>', 
                                                data: <%= Str_StateWiseAppCountINFV.ToString() %>  
                                                ,stack:'BeforeExpire'     
                                            } 
                                            
                                            
                                            ,{
                                                name: 'BeforeExpire',  color:'<%= Str_StateWiseAppCountMINColor.ToString() %>',
                                                data: <%= Str_StateWiseAppCountMINV.ToString() %>
                                                ,stack:'BeforeExpire'     
                                            }    
                                            
                                            
                                            
                                              
                                            ,   {       name: 'AfterExpire',color:'<%= Str_StateWiseAppCountINDColor.ToString() %>', 
                                                data: <%= Str_StateWiseAppCountINDI.ToString() %>
                                                ,stack:'AfterExpire'     

                                            }
                                            
                                            ,{
                                                name: 'AfterExpire',  color:'<%= Str_StateWiseAppCountINFColor.ToString() %>', 
                                                data: <%= Str_StateWiseAppCountINFI.ToString() %>  
                                                ,stack:'AfterExpire'     
                                            } 
                                            
                                            
                                            ,{
                                                name: 'AfterExpire',  color:'<%= Str_StateWiseAppCountMINColor.ToString() %>',
                                                data: <%= Str_StateWiseAppCountMINI.ToString() %>
                                                ,stack:'AfterExpire'     
                                            }                                                          
                                                  
                ]
                                                    
            });

        }

    </script>
</asp:Content>


<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server"> 
    <table width="100%" style="line-height: 25px">       
        <tr>
            <td colspan="2">
                <div id="MainChartStateWiseAppCount">
                </div>
            </td>
        </tr>
    </table>   
</asp:Content>

Richard Deeming

Вы, кажется, забыли задать вопрос.

Вы сказали нам, что вы хотите сделать, и вы показали нам, что вы пытались; но вы не сказали нам, в чем проблема, или где вы застряли.

Member 7909353

Он показывает высокий тип столбца диаграмм ,я хочу штабелированную гистограмму

1 Ответов

Рейтинг:
12

Member 7909353

В .aspx-файл

  <script type="text/javascript">
        $(document).ready(function () {
            GetStateWiseAppCountForAll();
           
        });

 function GetStateWiseAppCountForAll() {

            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "WebService.asmx/GetStateWiseAppCountForAll",
                data: "{}",
                dataType: "json",
                success: OnSuccess_StateWiseAppCountForAll,
                error: OnErrorCall_StateWiseAppCountForAll
            });
        }
<pre>  function OnSuccess_StateWiseAppCountForAll(Result) {
            Result = Result.d;
            var series = [];

            var categories = [];
            var INDA = [];
            var INFA = [];
            var MINA = [];

            var INDV = [];
            var INFV = [];
            var MINV = [];

            var INDI = [];
            var INFI = [];
            var MINI = [];

            for (var i in Result) {
                categories.push(Result[i].categories);
                INDA.push(Result[i].INDA);
                INFA.push(Result[i].INFA);
                MINA.push(Result[i].MINA);

                INDV.push(Result[i].INDV);
                INFV.push(Result[i].INFV);
                MINV.push(Result[i].MINV);

                INDI.push(Result[i].INDI);
                INFI.push(Result[i].INFI);
                MINI.push(Result[i].MINI);
            }
            
           

            series.push({
                name: 'Industrial',
                color: '<%= Str_StateWiseAppCountINDColor.ToString() %>',
                data: INDA
                , stack: 'All'
            },
                               {
                                   name: 'Infrastructure',
                                   color: '<%= Str_StateWiseAppCountINFColor.ToString() %>',
                                   data: INFA
                                   , stack: 'All'
                               },
                               {
                                   name: 'Mining',
                                   color: '<%= Str_StateWiseAppCountMINColor.ToString() %>',
                                   data: MINA
                                   , stack: 'All'
                               }
                               ,
                               {
                                   name: 'Industrial Before Expire',
                                   color: '<%= Str_StateWiseAppCountINDColor.ToString() %>',
                                   data: INDV,
                                   stack: 'Valid Data'
                               }
                               ,
                               {
                                   name: 'Infrastructure Before Expire',
                                   color: '<%= Str_StateWiseAppCountINFColor.ToString() %>',
                                   data: INFV,
                                   stack: 'Valid Data'
                               }
                               ,
                               {
                                   name: 'Mining Before Expire',
                                   color: '<%= Str_StateWiseAppCountMINColor.ToString() %>',
                                   data: MINV,
                                   stack: 'Valid Data'
                               }

                                ,
                               {
                                   name: 'Industrial After Expire',
                                   color: '<%= Str_StateWiseAppCountINDColor.ToString() %>',
                                   data: INDI,
                                   stack: 'Invalid Data'
                               }
                                ,
                               {
                                   name: 'Infrastructure After Expire',
                                   color: '<%= Str_StateWiseAppCountINFColor.ToString() %>',
                                   data: INFI,
                                   stack: 'Invalid Data'
                               }
                                ,
                               {
                                   name: 'Mining After Expire',
                                   color: '<%= Str_StateWiseAppCountMINColor.ToString() %>',
                                   data: MINI,
                                   stack: 'Invalid Data'
                               }
                   );
                               BindChart(categories, series);
            
                           }
<pre> function BindChart(categories, series) {

                               var chart = {
                                   type: 'bar'
                                   , height: 1400
                               };
                               var title = {
                                   text: 'State Wise Application Count For New NOC'
                               };
                               var subtitle = {
                                   text: 'subtitle'
                               };
                               var xAxis = {
                                   
                                   categories: categories,
                                   title: {
                                       text: 'State Name'
                                   }
                               };
                               var yAxis = {
                                   min: 0,
                                   title: {
                                       text: 'Total Application',
                                       align: 'high'
                                   },
                                   labels: {
                                       overflow: 'justify'
                                   }
                               };
                               var tooltip = {
                                   //valueSuffix: ' millions',
                                   animation: true,
                                   shadow: true,
                                   //headerFormat: '{series.name}<br/>',
                                   pointFormat: '{point.FullName}<br/>{series.name}: {point.y}<br/>Total: {point.stackTotal}'
                               };
                               var plotOptions = {
                                   bar: {
                                       pointPadding: 0.1,
                                       borderRadius: 1,
                                       stacking: 'normal',
                                       dataLabels: {
                                           enabled: true
                                       }
                                   },
                                   series: {
                                       stacking: 'normal'
                                   }
                               };
                              

                               var legend = { align: 'right', x: 5, verticalAlign: 'bottom', y: 20, floating: true, backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white', borderColor: '#CCC', borderWidth: 1, shadow: false };
                               var credits = {
                                   enabled: false
                               };
                              
                               
                               var series = series;
                               var json = {};
                               json.chart = chart;
                               json.title = title;
                               json.subtitle = subtitle;
                               json.tooltip = tooltip;
                               json.xAxis = xAxis;
                               json.yAxis = yAxis;
                               json.series = series;
                               json.plotOptions = plotOptions;
                               json.legend = legend;
                               json.credits = credits;
                               $('#container2').highcharts(json);
                           }

функция OnErrorCall_StateWiseAppCountForall(ответ) {
тревога("Ой, что-то пошло не так!");


}