динамический график knockoutJS с высокими графиками - PullRequest
Новая
       34

динамический график knockoutJS с высокими графиками

4 голосов
/ 29 марта 2012

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

Я пришел с 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();

}

Ответы [ 2 ]

3 голосов
/ 30 марта 2012

У меня есть опыт работы как с KO, так и с Highcharts, но странно, я никогда не комбинировал их таким образом. Было бы неплохо просто сохранить модель KO в памяти, которая имитирует объект конфигурации HC, и эти два просто играют хорошо. К сожалению, этого не произойдет, поскольку наблюдаемые KO являются функциями, а HC ожидает чистый json. Вы можете сделать это, но вам придется каждый раз уничтожать диаграмму и воссоздавать ее с не нанесенной на карту копией вашей модели KO, так что, вероятно, не то, о чем вы думали.

Когда вы говорите, динамический, я предполагаю, что вы имеете в виду только данные?

Существует ряд методов для объектов диаграммы / серии , задокументированных здесь , которые можно использовать для подключения вашей модели к вашей диаграмме. Действительно простой и неполный способ был бы что-то вроде. 

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

См. Здесь для более подробной информации о подписке на наблюдаемые.

Вот скрипка, которую я создал, чтобы проверить это.

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

Боюсь, будет небольшое ручное сопоставление объектов вашей модели с форматом данных старшей диаграммы.

Надеюсь, это поможет.

1 голос
/ 12 июня 2013

Как и для большинства сторонних плагинов, которые управляют DOM, к ним почти всегда лучше всего подходить с помощью пользовательского обработчика привязки .У меня нет опыта работы с Highcharts, но, судя по всему, он использует подход к инициализации и обновлению аналогично другим библиотекам, которые хорошо работают с пользовательскими привязками KO.

...