如何使用javascript重绘jqplot条形图

时间:2017-09-25 06:02:31

标签: javascript jqplot

我有两个功能。 FunctionToChangeBarChart getPreviousDayValues 。我想在每个函数中绘制jqPlot条形图。所以我在函数 LoadBarChart 中编写了绘制条形图的代码,并将此函数称为 FunctionToChangeBarChart getPreviousDayValues functoins。问题是条形图在每个函数调用中重新绘制,一个在另一个上面。

如何刷新条形图?

FunctionToChangeBarChart = function(event){
        var totalNoUsers = 10;
        var tempStart = 4;
        var pendingTaskCount = 7;
        var completedTaskCount = 2;
                LoadBarChart(totalNoUsers,tempStart,pendingTaskCount,completedTaskCount);
    });
getPreviousDayValues = function(Event){
var totalUsers = 20; 
var tempStart = 4;
var pendingTaskCount = 9;
var completedTaskCount = 3;
LoadBarChart(totalUsers,tempStart,pendingTaskCount,completedTaskCount);

}

function LoadBarChart(total,start,pending,complete,todayVal){
            var s1 = [total, start, pending, complete];
            var ticks = ['total', 'started', 'pending','completed' ];
            plot1 = $.jqplot('chart1', [s1], {
               animate: !$.jqplot.use_excanvas,
            seriesDefaults:{
                renderer:$.jqplot.BarRenderer,
                rendererOptions: {barMargin: 0 , varyBarColor : true},
                pointLabels: { show: true }
            },
            title:{text:"Task Status and Users"},
            grid: {
                background: 'transparent',      // CSS color spec for background color of grid.
                drawBorder:false,
                drawGridlines:false,
                shadow:false
            },
            axes: {
                xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer,
                    ticks: ticks,
                    tickOptions : {
                                      //  showGridline : false
                    }
                },
                yaxis: {
                    tickOptions : {
                        //  showGridline : false
                    },
                    //  label:'Status',
                    labelRenderer: $.jqplot.CanvasAxisLabelRenderer
                }
            },
                seriesColors: [ "#000", "#ccc", "red","green"],
                highlighter: { show: false }
            });
            $('#chart1').bind('jqplotDataClick',
                        function (ev, seriesIndex, pointIndex, data) {$('#info1').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
            });
        }

0 个答案:

没有答案