Wie kann ich das Highchart -JQuery -Plugin dynamisch aus der MVC -Aktion bevölkern?

Question

Ich probiere das Highcharts JQuery -Plugin aus, um Datendiagramme in einer MVC -Anwendung zu erstellen. Aber ich muss die Daten für die Funktion dynamisch von einer Aktionsmethode abrufen. Wie kann ich das machen?

Nehmen Sie das Beispiel von der Highcharts -Site (http://highcharts.com/documentation/how-to-use):

var chart1; // globally available
$(document).ready(function() {
      chart1 = new Highcharts.Chart({
         chart: {
            renderTo: 'chart-container-1',
            defaultSeriesType: 'bar'
         },
         title: {
            text: 'Fruit Consumption'
         },
         xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
         },
         yAxis: {
            title: {
               text: 'Fruit eaten'
            }
         },
         series: [{
            name: 'Jane',
            data: [1, 0, 4]
         }, {
            name: 'John',
            data: [5, 7, 3]
         }]
      });
   });

Wie kann ich die Daten dort dynamisch aus der Aktionsmethode einbeziehen? Jemand schlug vor, ich könnte JSON verwenden, konnte aber nicht angeben, wie. Wenn dies der Fall ist, würde ich ein einfaches und spezifisches Beispiel sehr schätzen, weil ich nicht viel über JSON weiß.

Jede Hilfe geschätzt!

Answer 1

Ich habe es gerade selbst zum Laufen gebracht, nachdem ich Probleme hatte, meine dynamischen Daten in einer Rails -App zu formatieren, an der ich arbeite.

Am Ende habe ich Versuch und Irrtum verwendet und die Seitenquelle angezeigt, bis sie so aussah, wie ich es wollte.

series [{
name: "#{@model_name}",
data: #{@model_name.get_some_nested_array.to_json}
}]

In der Seitenquelle sieht es also so aus:

series [{
name: "Model Name",
data: [[1, 4], [2, 3], [3, 7]]
}]