Angular图表尚未清除其旧数据

时间:2017-08-14 14:09:10

标签: javascript angularjs chart.js linechart

我在重新加载图表上遇到了更新细节的问题,我每天都会根据用户活动显示图表,初始加载时预设值会精确地形成图表

这里我使用的是flot chart库,在那个flot chart库中我正在使用折线图

这是初始图

enter image description here

但是当我使用自定义值而不是使用更新的值加载新图表时,自定义值会附加到图表上x轴的右端。

当我使用自定义值时,图表看起来像

enter image description here

在第二张图中,包含的数据会添加到右侧的旧数据中,而不是按正确的顺序显示

这是我的第一个图表的代码,在vm.allsessionReport中输入数据 输入数据将通过程序化

获得
            vm.allSessionReport = [];
            vm.sessionData = [{
                              "color": "#7dc7df",
                              "data": vm.allSessionReport
                            }];
           vm.allSessionReport = [
            ["2017-06-30", 0],
            ["2017-07-01", 0],
            ["2017-07-02", 0],
            ["2017-07-03", 0],
            ["2017-07-04", 17],
            ["2017-07-05", 0],
            ["2017-07-06", 0],
            ["2017-07-07", 0]
            ]
            vm.sessionData = [{
                              "color": "#7dc7df",
                              "data": vm.allSessionReport
                            }];                                
            console.log('session data 2nd', vm.sessionData)                                
            vm.sessionOptions = {
                series: {
                    lines: {
                        show: true,
                        fill: 0.01
                    },
                    points: {
                        show: true,
                        radius: 4
                    }
                },
                grid: {
                    borderColor: '#eee',
                    borderWidth: 1,
                    hoverable: true,
                    backgroundColor: '#fcfcfc'
                },
                tooltip: true,
                tooltipOpts: {
                    content: function (label, x, y) { return x + ' : ' + y; }
                },
                xaxis: {
                    position: ($scope.app.layout.isRTL ? 'top' : 'bottom'),
                    tickColor: '#eee',
                    mode: 'categories'
                },
                yaxis: {
                    position: ($scope.app.layout.isRTL ? 'right' : 'left'),
                    tickColor: '#eee'
                },
                shadowSize: 0
            };

我的第二张图的代码,输入数据已更改为

            vm.allSessionReport = [];
            vm.sessionData = [{
                              "color": "#7dc7df",
                              "data": vm.allSessionReport
                            }];
           vm.allSessionReport = [
            ["2017-06-28", 0],
            ["2017-06-29", 0],
            ["2017-06-30", 0],
            ["2017-07-01", 0],
            ["2017-07-02", 0],
            ["2017-07-03", 0],
            ["2017-07-04", 17],
            ["2017-07-05", 0],
            ["2017-07-06", 0],
            ["2017-07-07", 0]
            ]
            vm.sessionData = [{
                              "color": "#7dc7df",
                              "data": vm.allSessionReport
                            }];                                
            console.log('session data 2nd', vm.sessionData)                                
            vm.sessionOptions = {
                series: {
                    lines: {
                        show: true,
                        fill: 0.01
                    },
                    points: {
                        show: true,
                        radius: 4
                    }
                },
                grid: {
                    borderColor: '#eee',
                    borderWidth: 1,
                    hoverable: true,
                    backgroundColor: '#fcfcfc'
                },
                tooltip: true,
                tooltipOpts: {
                    content: function (label, x, y) { return x + ' : ' + y; }
                },
                xaxis: {
                    position: ($scope.app.layout.isRTL ? 'top' : 'bottom'),
                    tickColor: '#eee',
                    mode: 'categories'
                },
                yaxis: {
                    position: ($scope.app.layout.isRTL ? 'right' : 'left'),
                    tickColor: '#eee'
                },
                shadowSize: 0
            };

0 个答案:

没有答案