如何转换json数据系列符合人力车+角度使用的系列绘制图形?

时间:2015-07-22 08:00:01

标签: javascript json angularjs rickshaw

注意:如何将json数据系列转换为人力车系列。

我从网址获取json数据系列,我想用这个系列在人力车和angularjs中绘制图形。

来自网址的Json数据系列

{"series": [{"meter": "instance", "data": [{"y": 82.0, "x": "2015-07-14T23:58:00"}, {"y": 142.0, "x": "2015-07-15T23:58:10"}, {"y": 144.0, "x": "2015-07-16T23:58:10"}, {"y": 139.0, "x": "2015-07-17T23:56:17"}, {"y": 144.0, "x": "2015-07-18T23:56:18"}, {"y": 144.0, "x": "2015-07-19T23:56:17"}, {"y": 277.0, "x": "2015-07-20T23:50:09"}, {"y": 294.0, "x": "2015-07-21T23:51:34"}, {"y": 135.0, "x": "2015-07-22T07:21:34"}], "name": "demo", "unit": "instance"}], "settings": {}}

我根据人力车中使用的系列使用上述系列,但它不起作用..

 angular.module('hz.dashboard.ceilometer', [ 'ngSanitize' ])
        .controller('ceiloCtrl', function AppCtrl ($scope) {           
            var text='{"series": [{"meter": "instance", "data": [
                     {"y": 82.0, "x": "2015-07-14T23:58:00"},  
                     {"y": 142.0, "x": "2015-07-15T23:58:10"}, 
                     {"y": 144.0, "x": "2015-07-16T23:58:10"}, 
                     {"y": 139.0, "x": "2015-07-17T23:56:17"}, 
                     {"y": 144.0, "x": "2015-07-18T23:56:18"}, 
                     {"y": 144.0, "x": "2015-07-19T23:56:17"}, 
                     {"y": 277.0, "x": "2015-07-20T23:50:09"}, 
                     {"y": 294.0, "x": "2015-07-21T23:51:34"}, 
                     {"y": 135.0, "x": "2015-07-22T07:21:34"}], 
                     "name": "demo", "unit": "instance"}], "settings": {}}';
            var obj =JSON.parse(text);    
            var graph = new Rickshaw.Graph( {
                element: document.getElementById("chart"),
                width: 960,
                height: 500,
                renderer: 'line',                   

                series: [
                    {
                       color: "#c05020",
                       data: obj.series[0].data,
                    }
                ]
            } );

            graph.render();
            var hoverDetail = new Rickshaw.Graph.HoverDetail({
                graph: graph,
                xFormatter: function(x){
                    return new Date(x*1000).toString();
                }
            });

            var xAxis = new Rickshaw.Graph.Axis.Time( {
                graph: graph,
                ticksTreatment: ticksTreatment,
                timeFixture: new Rickshaw.Fixtures.Time.Local()
            } );

            xAxis.render();

        });

0 个答案:

没有答案