图表上的图例问题

Question

我有图表和过滤器，所以如果我使用2016年1月到2016年5月的过滤日期范围，它会显示如下

但是当我再次按下提交时，它显示如下：

我的观点是，每次我提交时，传说都会添加更多传说。我每次提交时如何制作1个传奇？

这是我的代码

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

在添加图例之前，您需要先清除chart1Legend。

请尝试以下代码段。

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

希望这有帮助！