jqPlot Skumulowana wykres słupkowy renderowany poza tabelą

Question

Używam jqPlot do generowania stosu wykresu słupkowego na podstawie danych z metody internetowej.

Wykres jest renderowany, ale jest pusty. Kiedy ustawiam pointLabels na "true", pojawiają się one w bigle po lewej stronie wykresu. Domyślam się, że ułożone słupki również są renderowane poza tabelą, ale nie rozumiem, dlaczego.

Czy ktoś może wyjaśnić, jak to naprawić?

Oto WebMethod:

[WebMethod] 
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)] 
    public List<dataPoint> getPartnerOrderVolumes() 
    { 
     List<dataPoint> p = new List<dataPoint>(); 
     DataTable dt = new DataTable(); 

     chart jep = new chart(5); 
     foreach (chartData cd in jep.lstChartData) 
     { 
      dt = cd.GetData(); 
     } 

     if (dt.Rows.Count > 0) 
     { 
      foreach (DataRow row in dt.Rows) 
      { 
       dataPoint dp = new dataPoint(); 
       dp.x1Value = row[2].ToString(); 
       dp.y1Value = row[3].ToString(); 
       dp.y2Value = row[4].ToString(); 
       p.Add(dp); 
      } 
     } 

     return p; 
    } 

Oto klasa DATAPOINT używany metodą internetowej:

 public class dataPoint 
    { 
     public string x1Value { get; set; } 
     public string y1Value { get; set; } 
     public string x2Value { get; set; } 
     public string y2Value { get; set; } 
     public string x3Value { get; set; } 
     public string y3Value { get; set; } 
     public string x4Value { get; set; } 
     public string y4Value { get; set; } 
    } 

Tutaj przykładem danych, które ściąga z bazy danych :

Oto javascript:

  function OnSuccess_(response) { 
      var aData = response.d; 
      var types = []; 
      var arrType = []; 
      var arr = []; 

      // find distinct types (partners) 
      for (i = 0; i < aData.length; i++) { 
       if (types.indexOf(aData[i].y2Value) === -1) { 
        types.push(aData[i].y2Value); 
       } 
      } 

      // generate array containing arrays of each type 
      for (i = 0; i < types.length; i++) 
      { 
       var filtered = aData.filter(function (el) { 
        return el.y2Value == types[i]; 
       }); 

       arrType.length = 0; 

       $.map(filtered, function (item, index) { 
        var j = [item.x1Value, item.y1Value]; 
        arrType.push(j); 
       }); 

       arr.push(arrType); 
      } 

      $.jqplot.config.enablePlugins = true; 

      plot1 = $.jqplot('chart5', arr, { 
       title: 'Partner Order Volumes', 
       // Only animate if we're not using excanvas (not in IE 7 or IE 8).. 
       animate: !$.jqplot.use_excanvas, 
       stackSeries: true, 
       seriesColors: ['#F7911E', '#32AB52', '#FFE200', '#29303A'], 
       seriesDefaults: { 
        shadow: true, 
        pointLabels: { show: true }, 
        renderer: $.jqplot.BarRenderer, 
        rendererOptions: { 
         varyBarColor: true, 
         animation: { speed: 2000 }, 
         barDirection: 'vertical' 
        } 
       }, 
       legend: { 
        show: true, 
        location: 'e', 
        placement: 'outside', 
        labels: types 
       }, 
       axesDefaults: { 
        labelRenderer: $.jqplot.CanvasAxisLabelRenderer, 
        tickRenderer: $.jqplot.CanvasAxisTickRenderer, 
        tickOptions: { fontSize: '10pt', textColor: '#000000' } 
       }, 
       axes: { 
        xaxis: { 
         renderer: $.jqplot.CategoryAxisRenderer, 
         tickOptions: { angle: -30 } 
        }, 
        yaxis: { 
         label: 'Count of New Orders', 
         min: 0, 
         max: 200 
        } 
       }, 
       highlighter: { show: false } 
      }); 
     } 
     function OnErrorCall_(response) { 
      alert("Whoops something went wrong!"); 
     } 
    }); 

Answer 1

Myślę, że są dwie rzeczy, które łączą się przyczyną problemu:

pierwsze: nie prawidłowo powielacze tablice. Podczas dzielenia danych na typy resetujesz tymczasową tablicę za pomocą arrType.length = 0. Powoduje to zresetowanie długości tablicy, ale nie tworzy nowej tablicy. Oznacza to, że w rzeczywistości wszystkie odwołania do tablicy, które należy przesłać do arr, wskazują na tę samą tablicę - ostatnie dane ostatniego przetworzonego typu. Trzeba wymienić arrType.length = 0; z:

arrType = [];

Alternatywnie utrzymać .length = 0 i używać następujących po naciśnięciu tablicę arr:

arr.push(arrType.slice());

drugie: nieprawidłowy renderujący używany. Renderowanie dla xaxis powinno być $.jqplot.DateAxisRenderer, a nie $.jqplot.CategoryAxisRenderer, którego aktualnie używasz. Data renderujący jest plugin też, więc trzeba się upewnić, że są następujące (oczywiście ze ścieżką dostosowane odpowiednio do konfiguracji):

<script type="text/javascript" src="plugins/jqplot.dateAxisRenderer.js"></script>

będziemy chcieli tickOptions na xaxis być coś :

tickOptions: { formatString: '%b %#d', angle: -30 }

z tych korekt, a także z niektórych przykładowych danych pochodzących z kodu C#, JS powodzeniem produkuje następujące:

Nadzieję, że rozwiązuje problem!