knockoutJSハイチャートのダイナミックチャート

Question

だから、先週ハイチャートとKOでプレーしてきました。ハイチャートグラフの構文は非常にシンプルで読みやすい。

私はJavaから来ています.JSにはかなり新しいので、実際にどのようにスコープでプレイするのかは分かりません。

ノックアウトをハイチャートと組み合わせて使用​​したり組み合わせたりして、簡単にダイナミックグラフを作成できますか？私は単純にそれらを同じJSファイルに入れることはできますか？

ハイチャートコードはとてもシンプルに見えますが、簡単な解決策が必要です。事前に入力/助けてくれてありがとう！ここで

は私の高いチャートのグラフのためのコードです：

$(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] 
      }] 
     }); 
    }); 
}); 

そして、ここでは私のKOモデルです：

/* 
* 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

私はKOとHighchartsの両方の経験を持っていますが、変なふうに、私は組み合わせることがありませんこれらの方法で。 HCの設定オブジェクトを模倣したKOモデルをメモリに保持するだけでいいです。残念ながら、KOのオブザーバブルは関数であり、HCは純粋なjsonを期待しているので、これは起こりません。あなたはこれを行うことができますが、毎回そのチャートを破壊し、あなたのKOモデルのマッピングされていないコピーで再作成する必要があります。

ダイナミックとは、データのみを意味すると仮定していますか？

チャート/シリーズオブジェクトdocumented hereには、モデルをチャートに接続するために使用できるいくつかのメソッドがあります。本当にシンプルで不完全な方法は、次のようなものになります。

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

別の方法としては、ユーザーの配列を購読することができ、それに応じてグラフを更新します。観測への加入の詳細については

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

See here（私は配列に、ユーザーの測定値データをマップしませんでしたが、あなたのアイデアを得るに注意してください）。

私はこれをテストするために作成したフィドルです。

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

私はhighchartのデータ形式にモデルオブジェクトの手動マッピングのビットがあるように起こっているんです。

これが役に立ちます。

Answer 2

DOMを操作するほとんどのサードパーティ製プラグインと同様に、ほとんどの場合、custom binding handlerを使用して最も接近します。 Highchartsの経験はありませんが、見た目から見ると、カスタムKOバインディングと同じように他のライブラリと同様の初期化と更新にアプローチするようです。