knockoutJS dynamische Grafik mit hohen Charts

Question

Also, ich habe für die vergangene Woche mit hohen Charts und KO zu spielen. Die Syntax für das High-Charts-Diagramm ist sehr einfach und leicht zu lesen.

ich aus Java, und ich bin ziemlich neu in JS, also bin ich nicht sicher, wie wirklich mit dem Umfang zu spielen.

Gibt es trotzdem oder Knockout leicht mit hohen Charts kombinieren zu verwenden, um ein dynamisches Diagramm zu machen? Kann ich sie einfach in dieselbe JS-Datei einfügen?

Die hohe Charts Code sieht so einfach es eine einfache Lösung sein! Vielen Dank im Voraus für die Eingabe/Hilfe! Hier

ist der Code für meine High-Charts Graph:

$(function() { 
    var chart; 
    //alert(users); 
    $(document).ready(function() { 
     chart = new Highcharts.Chart({ 
      chart : { 
       renderTo : 'container', 
       type : 'line', 
       marginRight : 130, 
       marginBottom : 25 
      }, 

      title : { 
       text : 'Body Weight', 
       x : -20 //center 
      }, 
      xAxis : { 
       categories : ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
      }, 

      yAxis : { 
       title : { 
        text : 'Weight (lbs)' 
       }, 
       plotLines : [{ 
        value : 0, 
        width : 1, 
        color : '#808080' 
       }] 
      }, 
      tooltip : { 
       formatter : function() { 
        return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + this.y + 'lbs'; 
       } 
      }, 
      legend : { 
       layout : 'vertical', 
       align : 'right', 
       verticalAlign : 'top', 
       x : -10, 
       y : 100, 
       borderWidth : 0 
      }, 
      series : [{ 
       name : 'George', 
       data : [185,190,185,180] 
      }, { 
       name : 'Bindu', 
       data : [115,110,112,115] 
      }, { 
       name : 'Phil', 
       data : [195,190,190,185] 
      }] 
     }); 
    }); 
}); 

Und hier ist mein KO Modell:

/* 
* Reading class 
* containts health readings 
*/ 
function Reading(date,weight,glucose) 
{ 
    var self = this; 

    self.date=ko.observable(date); 
    self.weight=ko.observable(weight); 
    self.glucose=ko.observable(glucose); 
    self.readingId=ko.observable(0); 

     self.formattedWeight = ko.computed(function(){ 
     var formatted = self.weight(); 

     return formatted+" lb" 
    }); 
} 

/* 
* User class 
* contains a user name, date, and an array or readings 
*/ 
function User(name,date,readings) { 
    var self = this; 

    self.name = name; 
    self.date = date; 
    self.userId = ko.observable(0); 
    self.readingsArray = ko.observableArray([ 
     new Reading(99,22,88),new Reading(11,22,33) 
    ]); 
} 
// Overall viewmodel for this screen, along with initial state 
function userHealthModel() { 
    var self = this; 
    self.inputWeight = ko.observable(); 
    self.inputDate = ko.observable(); 
    self.inputId = ko.observable(); 
    self.inputGlucose = ko.observable(); 

    // Operations 
    self.subscribe = function(){ 
     var users = this.users(); 
     for(var x = 0; x < users.length; x++) 
     { 
      self.users()[x].userId(x); 
     } 

    } 
    self.addUser = function(){ 
     self.users.push(new User("",0,0,(new Reading(0,0)))); 
     self.subscribe(); 
    } 

    self.removeUser = function(userName){ 
    self.users.remove(userName); 
    self.subscribe();} 

    //adds a readings to the edittable array of readings (not yet the reading array in a user) 
    self.addReading = function(){ 
     var iD = self.inputId(); 
     var date = self.inputDate(); 
     var weight = self.inputWeight(); 
     var glucose = self.inputGlucose(); 
     if((weight&&date)||(glucose&&date)) 
     { 
      self.users()[iD].readingsArray.push(new Reading(date,weight,glucose)); 
      self.readings.push(new Reading(date,weight,glucose)); 
     } 
     else{ 
      alert("Please complete the form!") 
     } 
    } 
    self.removeLastReading = function(userName){ 
     var lastIndex = (userName.readingsArray().length)-1; 
     var removeThisReading = userName.readingsArray()[lastIndex]; 
     userName.readingsArray.remove(removeThisReading); 
    } 


    //editable data 
    self.readings = ko.observableArray([ 
     new Reading(12,99,3),new Reading(22,33,2), 
     new Reading(44,55,3) 
    ]); 

     self.users = ko.observableArray([ 
     new User("George",2012),new User("Bindu",2012) 
    ]); 
    self.subscribe(); 

} 

Answer 1

Ich habe Erfahrung mit beiden KO und Highcharts aber weirdly habe ich noch nie kombiniert sie auf diese Weise. Es wäre schön, einfach ein KO-Modell im Speicher zu halten, das das Konfigurationsobjekt von HC nachahmt und die beiden einfach nett spielen. Leider wird dies nicht passieren, da die Observablen von KO Funktionen sind und HC reines json erwartet. Sie könnten dies tun, aber Sie müssten das Diagramm jedes Mal zerstören und mit einer nicht zugeordneten Kopie Ihres KO-Modells neu erstellen, also wahrscheinlich nicht, was Sie dachten.

Wenn Sie dynamische sagen, ich gehe davon aus Sie die Daten nur bedeuten?

Es gibt eine Reihe von Methoden für die Diagramm-/Serienobjekte documented here, mit denen Sie Ihr Modell mit Ihrem Diagramm verbinden können. Ein wirklich einfacher und unvollständiger Weg wäre so etwas wie.

self.addUser = function() { 
    var user = new User("Foo", 0, 0, new Reading(0, 0)); 
    self.users.push(); 
    self.subscribe(); 

    // chart handler 
    /// need to convert the readingsArray into a data array 
    chart.addSeries({ name: user.name, data: [180, 175, 195, 180] }); 
} 

Alternativ können Sie auf den Benutzer-Array anmelden und die Tabelle entsprechend aktualisieren. (Anmerkung Ich habe Karte nicht Ihre Benutzer Lesungen Daten auf das Array, aber Sie erhalten die Idee)

viewModel.users.subscribe(function() { 
    .. update chart here 
}); 

See here für weitere Details über zu Observablen abonnieren möchte. Hier

ist die Geige Ich habe dies zu testen.

http://jsfiddle.net/madcapnmckay/uVTNU/

Ich fürchte, es wird ein wenig manuelle Zuordnung Ihrer Modellobjekte sein die Formatdaten highchart.

Hoffe, das hilft.

Answer 2

Wie bei den meisten 3rd-Party-Plugins, die das DOM manipulieren, werden sie fast immer am besten mit einem custom binding handler angesprochen. Ich habe keine Erfahrung mit Highcharts, aber es scheint, als ob es einen Ansatz zur Initialisierung und Aktualisierung ähnlich wie bei anderen Bibliotheken, die gut als benutzerdefinierte KO-Bindungen funktionieren, braucht.