нокаутJS динамическая диаграмма с высокими графиками

Question

Итак, я играю с высокими чартами и нотами на прошлой неделе. Синтаксис графика высоких диаграмм очень прост и легко читается.

Я прихожу с 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

У меня есть опыт как с нокаутом и Highcharts, но удачливый я никогда в сочетании их таким образом. Было бы неплохо просто держать модель KO в памяти, которая имитирует объект конфигурации HC, и оба просто играют хорошо. К сожалению, это не произойдет, поскольку наблюдаемые функции 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.