API-Daten aus der Kendo-UI-Diagrammserie aufrufen

Question

Gibt es eine Möglichkeit, die Diagramme mit Remotedaten zu aktualisieren, wenn Sie keine Datenquelle verwenden, sondern dynamisch einen Seriensatz mit den Rückgabedaten aus der API erstellen? Ich möchte die API erneut aufrufen und das Diagramm neu erstellen.

Answer 1

Wenn Aurelia verwenden, gibt es eine 3rd-Party-Brücke zwischen Kendo und aurelia die aurelia-kendo-bridge genannt. Wenn sie das verwenden, haben sie eine recreate() -Funktion, die ausgeführt werden kann, um die Diagramme neu zu laden. Ich musste nur alle meine Charts ins Visier nehmen und es funktionierte. Vielen Dank @ Jeroen Vinke für die Hilfe.

Answer 2

mit diesem können Sie die API vom Controller aufrufen und wenn Sie Live-Update wollen versuchen, das Diagramm zu bestimmten Zeitpunkt zu aktualisieren.

$("#chartere").kendoChart({ 
       dataSource: { 
        transport: { 
         read: { 
          url: '@Html.Raw(@Url.Action("method", "controller"))', 
          dataType: "json" 
         } 
        }, 
        group: { 
         field: "title", 
         Color: "Color" 
        } 
       }, 

       seriesDefaults: { 
        type: "bar", 
        stack: { 
         type: "100%" 
        } 
       }, 
       series: [{ 
        field: "value", 
        colorField: 'Color', 
        groupColor: function (item) { 
         var series = item.series; 
         series.color = series.data[item.index].Color; 
        } 
       }], 

       categoryAxis: { 
        field: "Category", 
        majorGridLines: { 
         visible: false 
        } 
       }, 

       valueAxis: { 
        line: { 
         visible: true 
        }, 
        minorGridLines: { 
         visible: true 
        } 
       }, 
      }); 

und verwenden diese für Aktualisierungen des Diagramms

chart.dataSource.read(); 
chart.refresh(); 

Bitte überprüfen Sie diese URL http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#refresh

Answer 3

Jedes Kendo-Widget haben eine setOptions Funktion, die es Ihnen ermöglichen, die Option des Widgets ändern die gleiche Weise initialisiert sie. Sie können die Serie mit dieser Funktion ersetzen.

$("#chart").kendoChart({ 
    series: [{ 
     data: [1, 2, 3] 
    }] 
}); 

var chart = $("#chart").data("kendoChart"); 
chart.setOptions({ 
    series: [{ 
     data: [4, 5, 6] 
    }] 
}); 
chart.refresh();