2017-12-14 4 views
1

Ich bin mit ASP MVC und ich habe ein ej Diagramm in Skript gebaut, und ich brauche den Inhalt zu aktualisieren:Syncfusion ej Diagramm neu zu zeichnen [n] undefined

mein Diagramm wie diese aufgebaut ist:

var modelSummaryList = getMySummaryModel(); 
     var summaryChartDataManager = ej.DataManager(($scope.FirstLoad && IsCurrentUserDpiUser()) ? null : modelSummaryList); 
     jQuery("#MySummaryChart").ejChart({ 
      range: { min: summaryChartDataManager == null ? -1 : summaryChartDataManager.ChartMin, max: summaryChartDataManager == null ? 1 : summaryChartDataManager.ChartMax }, 

      series: [{ 
       name: "MTM", 
       tooltip: { 
        visible: true, 
        format: "#point.x#: #point.y# #series.name#" 
       }, 
       dataSource: summaryChartDataManager, 
       xName: "CtpyShort", 
       yName: "MTM" 
      }, { 
       name: "Threshold", 
       tooltip: { 
        visible: true, 
        format: "#point.x#: #point.y# #series.name#" 
       }, 
       dataSource: summaryChartDataManager, 
       xName: "CtpyShort", 
       yName: "Threshold" 
      }, { 
       name: "My Held/(Posted)", 
       tooltip: { 
        visible: true, 
        format: "#point.x#: #point.y# #series.name#" 
       }, 
       dataSource: summaryChartDataManager, 
       xName: "CtpyShort", 
       yName: "Held" 
      }], 
      type: 'column', 
     }); 

, die gut funktioniert, aber auf Filter und Änderung von Daten, ich brauche das Diagramm neu zu zeichnen, damit ich dies tat:

$scope.RefreshChart = function (data) { 
     var chart = $("#MySummaryChart").ejChart("instance"); 
     chart.model.range.min = data.MyTradeSummaryVM.ChartMin; 
     chart.model.range.max = data.MyTradeSummaryVM.ChartMax; 
     for (var s = 0; s <= chart.model.series.length - 1; s++) { 
      var pts = IsCurrentUserDpiUser() ? $.grep(data.MyTradeSummaryVM, function (item) { 
       return item.ClientID == localStorage.getItem("MyPosting_client_sticky"); 
      }) : data.MyTradeSummaryVM; 
      chart.model.series[s].points = []; 

      for (var p = 0; p <= pts.length - 1; p++) { 

       var newPt = new Object(); 

       newPt.x = pts[p].CtpyShort; 

       if (chart.model.series[s].name == "MTM") 
        newPt.y = pts[p].MTM; 
       else if (chart.model.series[s].name == "Threshold") 
        newPt.y = pts[p].Threshold; 
       else if (chart.model.series[s].name == "My Held/(Posted)") 
        newPt.y = pts[p].Held; 

       newPt.visible = true; 
       chart.model.series[s].points.push(newPt); 

      } 
     } 
     chart.redraw(); 

    }; 

, die dem Fehler Typeerror werfen: n [0] ist nicht definiert in der chart.redraw() Zeile, und ich bin ratlos. Bitte beachten Sie, dass die RefreshChart() funktioniert, wenn ich die Karte via cshtml und kein Javascript wie folgt aufbauen:

@(Html.EJ().Chart("MySummaryChart") 
        .PrimaryXAxis(pr => pr.Title(tl => tl.Text(""))) 
        .PrimaryYAxis(pr => pr.Range(ra => ra.Max(Model.ChartMax).Min(Model.ChartMin)).Title(tl => tl.Text(""))) 
        .CommonSeriesOptions(cr => cr.Type(SeriesType.Column).EnableAnimation(true).Marker(mr => mr.DataLabel(dt => dt.Visible(true).EnableContrastColor(true))) 
        .Tooltip(tt => tt.Visible(true).Format("#point.x# : #point.y# #series.name# "))) 
        .Series(sr => 
        { 
         . 
. 
. 

        }) 

        .Load("loadTheme") 
        .IsResponsive(true) 
        .Size(sz => sz.Height("400")) 
        .Legend(lg => { lg.Visible(true).Position(LegendPosition.Bottom); })) 

aber ich entscheiden sich JS verwenden Coz I null und Firstload behandeln müssen (sollten keine Daten Sinn erscheinen auf Das Diagramm beim ersten Laden, und wenn der Benutzer einen Client (Filter) wählt, sollten keine Daten geladen werden.Was ich nicht scheinen, es funktioniert, wenn über HTML, konnte ich nicht löschen das Diagramm xaxisregions Etikett zusammen mit anderen Daten, die einzige Dinge gelöscht sind die wichtigsten Y-Achse Punkte, aber keine Etiketten.

Antwort

0

Wir haben das berichtete Szenario analysiert.Wir möchten Sie wissen, dass, wenn die Daten für Diagramm mit dataSource binden, dann Beim Aktualisieren des Diagramms mit neuen Daten müssen Sie die Daten an series.dataSource Eigenschaft nicht an series.points binden, damit nur das Diagramm ordnungsgemäß aktualisiert wird. Wir haben eine Probe in Bezug auf das obige Szenario vorbereitet. Suchen Sie das Code-Snippet, um diese Anforderung zu erfüllen.

<input type="button" id="refreshChart" onclick="refresh()" value="Refresh Chart" /> 

function refresh(sender) { 
    var chart = $("#MySummaryChart").ejChart("instance"); 
    for (var s = 0; s <= chart.model.series.length - 1; s++) { 
     //Obtained random data, 
     var pts = GetData().data; 
     var newPt = []; 
     for (var p = 0; p <= pts.length - 1; p++) { 
      if (chart.model.series[s].name == "MTM") 
       newPt.push({ "CtpyShort": pts[p].CtpyShort, "MTM": pts[p].MTM }); 
      else if (chart.model.series[s].name == "Threshold") 
       newPt.push({ "CtpyShort": pts[p].CtpyShort, "Threshold": pts[p].Threshold }); 
      else if (chart.model.series[s].name == "My Held/(Posted)") 
       newPt.push({ "CtpyShort": pts[p].CtpyShort, "Held": pts[p].Held }); 
     } 
     //Assign the updated data to dataSource property 
     chart.model.series[s].dataSource = newPt; 
    } 
    chart.redraw(); 
} 

Im obigen Code in einem Button-Klick-Ereignis haben wir die Diagrammdaten aktualisiert. Hier müssen Sie den x Wert zuweisen zu CtpyShort und y Werte von drei Serien zu MTM, Threshold und Held, da wir diese Eigenschaften zugeordnet haben, während das Diagramm zunächst zu machen.

Screenshots vor Aktualisieren von Daten: enter image description here

Screenshot nach Aktualisieren von Daten: enter image description here

Probe für Referenz von unten Link finden werden.

Sample Link

Wenn Sie noch irgendwelche Bedenken konfrontiert, kindly uns zurückkehren, indem Sie die obige Probe in Bezug auf Ihr Szenario zu ändern oder geben Sie Ihre Probe mit Replikationsschritte das wird hilfreich bei der weiteren Analyse und bieten Ihnen die Lösung früher.

Danke, Dharani.

Verwandte Themen