dynamic - setdata - highcharts update data

tabla dinámica knockoutJS con gráficos altos

Question

Por lo tanto, he estado jugando con gráficos altos y KO durante la última semana. La sintaxis para el gráfico de gráficos altos es muy simple y fácil de leer.

Vengo de Java y soy bastante nuevo para JS, así que no estoy seguro de cómo jugar realmente con el alcance.

¿Hay alguna forma de usar o combinar knockout con gráficos altos para hacer fácilmente un gráfico dinámico? ¿Puedo simplemente ponerlos en el mismo archivo JS?

El código de gráficos altos parece tan simple que tiene que haber una solución fácil. Gracias de antemano por la entrada / ayuda!

Aquí está el código para mi gráfico de gráficos altos:

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

Y aquí está mi modelo de 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

Tengo experiencia tanto con KO como con Highcharts, pero extrañamente nunca los he combinado de esta manera. Sería bueno simplemente mantener un modelo KO en la memoria que imita el objeto de configuración de HC y los dos simplemente juegan bien. Desafortunadamente, esto no va a suceder ya que los observables de KO son funciones y HC espera que Json puro. Podrías hacer esto pero tendrías que destruir el gráfico cada vez y recrear con una copia no asignada de tu modelo KO, probablemente no lo que estabas pensando.

Cuando dices dinámica, ¿supongo que te refieres solo a los datos?

Hay una serie de métodos en los objetos de gráfico / serie documentados aquí que se pueden usar para conectar su modelo a su gráfico. Una manera muy simple e incompleta sería algo así como.

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

Alternativamente, puede suscribirse a la matriz de usuarios y actualizar la tabla en consecuencia. (Tenga en cuenta que no correlacioné los datos de lecturas de usuario con la matriz, pero se entiende la idea)

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

Vea aquí para más detalles sobre la suscripción a observables.

Aquí está el violín que creé para probar esto.

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

Me temo que va a haber un poco de mapeo manual de los objetos de su modelo al formato de datos de Highchart.

Espero que esto ayude.

Answer 2

Al igual que con la mayoría de los complementos de terceros que manipulan el DOM, casi siempre se abordan mejor mediante el uso de un controlador de enlace personalizado . No tengo experiencia con Highcharts, pero por lo que parece, parece tener un enfoque de inicialización y actualización similar a otras bibliotecas que funcionan bien como enlaces de KO personalizados.