Dynamic knockoutJS动态图表与高图表

所以，在过去的一周里，我一直在玩高排行榜和KO。high charts图形的语法非常简单，易于阅读

我来自Java，对JS很陌生，所以我不知道如何真正使用范围

是否有任何方法可以使用或结合淘汰赛和高分图表来轻松制作动态图表？我可以简单地将它们放在同一个JS文件中吗

high charts代码看起来很简单，必须有一个简单的解决方案！提前感谢您的输入/帮助

以下是我的高图表的代码：

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

$（函数（）{
var图；
//警报（用户）；
$（文档）.ready（函数（）{
图表=新的高点图表。图表({
图表：{
renderTo:'容器'，
键入：“行”，
marginRight:130，
marginBottom:25
},
标题：{
正文：“体重”，
x:-20/中心
},
xAxis：{
类别：[一月、二月、三月、四月、五月、六月、七月、八月、九月、十月、十一月、十二月]
},
亚克斯：{
标题：{
文字：“重量（磅）”
},
绘图线：[{
值：0，
宽度：1，
颜色：'#808080'
}]
},
工具提示：{
格式化程序：函数（）{
返回“+this.series.name+”
“+this.x+”：“+this.y+”lbs”；
}
},
图例：{
布局：“垂直”，
对齐：“右”，
垂直排列：“顶部”，
x:-10，
y:100，
边框宽度：0
},
系列：[{
姓名：'乔治'，
数据：[185190185180]
}, {
名称：'Bindu'，
数据：[115110112115]
}, {
姓名：'菲尔'，
数据：[195190185]
}]
});
});
});

这是我的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();

}

/*
*阅读课
*包含健康读数
*/
函数读数（日期、重量、葡萄糖）
{
var self=这个；
自日期=可观察到的ko（日期）；
自身重量=可观察到的ko（重量）；
自身葡萄糖=可观察到的ko（葡萄糖）；
self.readingId=ko.observable（0）；
self.formattedWeight=ko.computed（函数（）{
var formatted=self.weight（）；
返回格式为+“lb”
});
}
/*
*用户类
*包含用户名、日期和一个或多个数组
*/
功能用户（名称、日期、读数）{
var self=这个；
self.name=名称；
self.date=日期；
self.userId=ko.observable（0）；
self.readingsArray=ko.observableArray([
新读数（99,22,88），新读数（11,22,33）
]); 
}
//此屏幕的整体视图模型以及初始状态
函数userHealthModel（）{
var self=这个；
self.inputWeight=ko.observable（）；
self.inputDate=ko.observable（）；
self.inputId=ko.observable（）；
self.inputGlucose=ko.observable（）；
//操作
self.subscribe=函数（）{
var users=this.users（）；
对于（var x=0；x

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

或者，您可以订阅用户数组并相应地更新图表。（注意，我没有将您的用户读数数据映射到阵列，但您知道了这一点）

有关订阅观测值的更多详细信息

这是我为测试这一点而制作的小提琴

恐怕会有一点手动将模型对象映射到highchart的数据格式

---

希望这能有所帮助。

与大多数操纵DOM的第三方插件一样，它们几乎总是通过使用。

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