淘汰赛JS动态图表与highcharts

所以，过去一周我一直在打高排行榜和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();

}

我对 KO 和 Highcharts 都有使用经验，但奇怪的是我从未以这种方式将它们结合起来。如果简单地在内存中保存一个模仿 HC 配置对象的 KO 模型，并且两者运行得很好，那就太好了。不幸的是，这不会发生，因为 KO 的可观察量是函数，而 HC 需要纯 json。您可以这样做，但每次都必须销毁图表并使用 KO 模型的未映射副本重新创建，因此可能不是您所想的那样。

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

图表/系列对象有多种方法记录在这里 http://www.highcharts.com/ref/#chart-object可用于将您的模型连接到图表。一个非常简单且不完整的方法是这样的。

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://knockoutjs.com/documentation/observables.html有关订阅可观察量的更多详细信息。

这是我为了测试这个而创建的小提琴。

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

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

希望这可以帮助。