проблема с легендой о chartjs

У меня есть график и фильтр, так что если я не использовать фильтр диапазон дат с января 2016 года до мая 2016 года он будет показывать, как этотпроблема с легендой о chartjs

Но когда я нажмите отправить еще раз, это показать, как это:

моя точка, каждый раз, когда я представить, легенда добавит больше легенд. Как я могу сделать только 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);

источник

2016-09-27 Wolfzmus

Перед тем, как ввести '$ ('# chart1Legend'). Append (legend);' statement, вы можете добавить '$ ('# chart1Legend'). Empty();' и повторить попытку? –

@DavidR работает отлично !!! Tq чувак !!!! – Wolfzmus

Рад, что это сработало !. Я опубликовал то же самое, что и здесь. Можете ли вы принять его? –

Вы должны очистить chart1Legend первые перед вашей Append своей легенды.

Попробуйте приведенный ниже фрагмент.

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

Надеюсь, это поможет!

источник

2016-09-27 10:14:46

Хорошо tq Дэвид, я просто согласен с ответом :) – Wolfzmus

проблема с легендой о chartjs

ответ

Смежные вопросы