带高位图的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 模型的未映射副本重新创建，因此可能不是您所想的那样。

当您说动态时，我假设您仅指数据？

此处记录的图表/系列对象上有许多方法可用于将模型连接到图表。一个非常简单且不完整的方法是这样的。

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/

恐怕需要将模型对象手动映射到 highchart 的数据格式。

希望这可以帮助。