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模型副本重新创建，所以可能不是你想的那样。

当你说动态时我假设你只是指数据？

图表/系列对象documented here上有许多方法可用于将模型连接到图表。一个非常简单和不完整的方式就像是。

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

或者，您可以订阅users数组并相应地更新图表。（注意我没有将您的用户读数数据映射到数组，但您明白了）

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

See here了解有关订阅可观察资料的更多详情。

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

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

我担心会有一些模型对象手动映射到highchart的数据格式。

希望这有帮助。

Answer 2

与大多数操纵DOM的第三方插件一样，通过使用custom binding handler几乎总能最好地接近它们。我没有使用Highcharts的经验，但从它的外观来看，似乎采用了一种初始化和更新的方法，类似于其他与自定义KO绑定一样好的库。

淘宝JS动态图表与highcharts

2 个答案: