图表上的图例麻烦

Question

I have chart and filter, so if i use filter date range from Jan 2016 until May 2016 it will show like this

But when i'm press submit again, it show like this :

my point is, everytime i'm submit, the legend will add more legends. How do i make just 1 legend everytime i'm submit?

this my code

var data = {


labels: dateLoop,


datasets: [{
                        label: 'QTY Target',
                        fillColor: 'rgba(27,42,240,0.2)',
                        strokeColor: 'rgba(72,84,243,1)',
                        pointColor: 'rgba(72,84,243,1)',
                        pointStrokeColor: '#fff',
                        pointHighlightFill: '#fff',
                        pointHighlightStroke: 'rgba(72,84,2431)',
                        data: countqtytarget
                    }, {
                        label: 'Qty Sewing',
                        fillColor: 'rgba(151,187,205,0.2)',
                        strokeColor: 'rgba(151,187,205,1)',
                        pointColor: 'rgba(151,187,205,1)',
                        pointStrokeColor: '#fff',
                        pointHighlightFill: '#fff',
                        pointHighlightStroke: 'rgba(151,187,205,1)',
                        data: countsew
                    }, {
                        label: 'Qty QC Output',
                        fillColor: 'rgba(255,0,0,0.2)',
                        strokeColor: 'rgba(255,0,0,1)',
                        pointColor: 'rgba(255,0,0,1)',
                        pointStrokeColor: '#fff',
                        pointHighlightFill: '#fff',
                        pointHighlightStroke: 'rgba(255,0,0,1)',
                        data: countqc
                    }, {
                        label: 'Qty Right First Time (RFT)',
                        fillColor: 'rgba(255,0,222,0.2)',
                        strokeColor: 'rgba(255,0,222,1)',
                        pointColor: 'rgba(255,0,222,1)',
                        pointStrokeColor: '#fff',
                        pointHighlightFill: '#fff',
                        pointHighlightStroke: 'rgba(255,0,222,1)',
                        data: countrft
                    }, {
                        label: 'Qty Repair (RPR)',
                        fillColor: 'rgba(227,255,0,0.2)',
                        strokeColor: 'rgba(241,255,127,1)',
                        pointColor: 'rgba(241,255,127,1)',
                        pointStrokeColor: '#fff',
                        pointHighlightFill: '#fff',
                        pointHighlightStroke: 'rgba(241,255,127,1)',
                        data: countrpr
                    }, {
                        label: 'Qty Polly Bag',
                        fillColor: 'rgba(71,180,2,0.2)',
                        strokeColor: 'rgba(107,195,52,1)',
                        pointColor: 'rgba(107,195,52,1)',
                        pointStrokeColor: '#fff',
                        pointHighlightFill: '#fff',
                        pointHighlightStroke: 'rgba(107,195,52,1)',
                        data: countpolly
                    }]
                };

                    var options = {

                        maintainAspectRatio: false,

                        // Sets the chart to be responsive
                        responsive: true,

                        ///Boolean - Whether grid lines are shown across the chart
                        scaleShowGridLines: true,

                        //String - Colour of the grid lines
                        scaleGridLineColor: 'rgba(0,0,0,.05)',

                        //Number - Width of the grid lines
                        scaleGridLineWidth: 1,

                        //Boolean - Whether the line is curved between points
                        bezierCurve: false,

                        //Number - Tension of the bezier curve between points
                        bezierCurveTension: 0.4,

                        //Boolean - Whether to show a dot for each point
                        pointDot: true,

                        //Number - Radius of each point dot in pixels
                        pointDotRadius: 4,

                        //Number - Pixel width of point dot stroke
                        pointDotStrokeWidth: 1,

                        //Number - amount extra to add to the radius to cater for hit detection outside the drawn point
                        pointHitDetectionRadius: 20,

                        //Boolean - Whether to show a stroke for datasets
                        datasetStroke: true,

                        //Number - Pixel width of dataset stroke
                        datasetStrokeWidth: 2,

                        //Boolean - Whether to fill the dataset with a colour
                        datasetFill: true,

                        // Function - on animation progress
                        onAnimationProgress: function() {
                        },

                        // Function - on animation complete
                        onAnimationComplete: function() {
                        },

                        //String - A legend template
                        legendTemplate: '<ul class="tc-chart-js-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].strokeColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>'
                    };
                    // Get context with jQuery - using jQuery's .get() method.
                    var ctx = $("#chart1").get(0).getContext("2d");
                    // This will get the first returned node in the jQuery collection.
                    var chart1 = new Chart(ctx).Line(data, options);
                    //generate the legend
                    var legend = chart1.generateLegend();
                    //and append it to your page somewhere
                    $('#chart1Legend').append(legend);

Answer 1

You need to clear your chart1Legend first before your append your legend.

Try the below snippet.

$('#chart1Legend').empty(); 
$('#chart1Legend').append(legend);

Hope this helps!