jqPlot Grafico a barre in pila reso fuori tabella

Question

Sto usando jqPlot per generare un grafico a barre in pila in base ai dati di un metodo web.

Il grafico viene visualizzato correttamente, ma è vuoto. Quando imposto i pointLabels su "true", appaiono in un jumble a sinistra del grafico. Immagino che anche le barre impilate vengano rese fuori grafico, ma non capisco perché.

Qualcuno potrebbe spiegare come risolvere questo problema?

Ecco il 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; 
    } 

Ecco la classe datapoint utilizzato dal metodo web:

 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; } 
    } 

Ecco un esempio dei dati che esso estrae dal database :

Ecco il 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

Penso che ci sono due cose che stanno combinando a causare il problema:

Prime: array non adeguatamente duplicazione. Quando si suddividono i dati in tipi, si ripristina l'array temporaneo con arrType.length = 0. Ciò reimposta la lunghezza dell'array, ma non crea un nuovo array. Ciò significa che in effetti tutti i riferimenti di matrice che si preme a arr puntano allo stesso array: gli ultimi dati per l'ultimo tipo elaborato. È necessario sostituire arrType.length = 0; con:

arrType = [];

In alternativa, mantenere il .length = 0 e utilizzare la seguente quando si spinge la matrice a arr:

arr.push(arrType.slice());

Secondo: non corretta renderer utilizzato. Il renderizzatore per il xaxis dovrebbe essere $.jqplot.DateAxisRenderer e non $.jqplot.CategoryAxisRenderer che è quello che stai attualmente utilizzando. La data di rendering è un plugin troppo, quindi è necessario assicurarsi di includere i seguenti (ovviamente con il percorso regolato in modo appropriato per la configurazione):

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

Vorrete tickOptions sul xaxis essere qualcosa di simile :

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

con queste regolazioni, e con alcuni dati di esempio derivati ​​dal codice C#, il JS prodotto con successo i seguenti:

Speranza che risolva il problema!