Chartjs-不使用图例显示/隐藏数据集

Question

对于我的毕业设计，我正在使用chartjs制作一些图表。他们现在有静态数据。而且我希望能够过滤数据集。（最终是数据集的一部分。我知道您可以单击图例项，并且可以隐藏/显示数据集。但是我希望没有图例就可以做到这一点。

我到处搜索，但只有找到的答案是如何隐藏/显示图例。我对Chartjs比较陌生。

示例在我的项目演示的第一个图表中。滑块图标会显示一个下拉列表。那么，如何在此下拉菜单中按一下按钮来显示或隐藏数据集，或者例如选中一个复选框呢？只是不使用图例。 enter image description here

此处的工作示例： http://afstudeerproject.sophiemulders.com/?page=shopresults

HTML
 <li class="kt-nav__item">
         <a href="#" id="testbutton"class="kt-nav__link">
         <i class="kt-nav__link-icon la la-print"></i>
         <span class="kt-nav__link-text">show 2019</span>
         </a>
 </li>

JAVASCRIPT

var omzetChartData = {
        labels: [daysEarlier(14),daysEarlier(13),daysEarlier(12), daysEarlier(11), daysEarlier(10), daysEarlier(9), daysEarlier(8), daysEarlier(7), daysEarlier(6), daysEarlier(5), daysEarlier(4), daysEarlier(3), daysEarlier(2), daysEarlier(1)],
        datasets: [{
            label: "2019",
            fill: false,
            borderColor: KTApp.getStateColor('brand'),
            backgroundColor: KTApp.getStateColor('brand'),
            data: [10, 40, 20, 40, 40, 60, 40, 80, 40, 70, 40, 70,50,55]
        }, {
            label: "2018",
            fill: false,
            borderColor: KTApp.getStateColor('brand2'),
            backgroundColor: KTApp.getStateColor('brand2'),
            data: [65, 59, 20, 81, 56, 55, 40, 40, 34, 50,70, 75,60,53]
        }, {
            label: "2017",
            fill: false,
            borderColor: KTApp.getStateColor('brand3'),
            backgroundColor: KTApp.getStateColor('brand3'),
            data: [59, 39, 18, 80, 57, 53, 39, 44, 35, 48,72, 90,85,75]
          }]
    };

    var ctx = document.getElementById("shopresult-RevenuChart").getContext('2d'); 
    var myRevenueChart = new Chart(ctx, {
        type: 'line',
        data: omzetChartData,
        options: {
            maintainAspectRatio: true,
            responsive: true,
            title: {
                display: false,

            },
            tooltips: {
                mode: 'index',
                intersect: false,
                backgroundColor: KTApp.getStateColor('brand')
            },
            hover: {
                mode: 'nearest',
                intersect: true
            },
            layout: {
                padding: {
                    left: 0,
                    right: 0,
                    top: 0,
                    bottom: 0
                }

            },
            scales: {
                xAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        //labelString: 'Month'
                    },
                    ticks:{
                        beginAtZero: 'true',
                        source:'labels'
                      },
                    type: "time",
                    time: {
                        parser: 'DD/MM/YYYY',
                        tooltipFormat: 'D MMM YYYY',
                        unit: 'day',
                        unitStepSize: 1,
                        displayFormats: {
                          'day': 'DD/M'
                        }
                    }

                }],
                yAxes: [{
                    display: true,
                    gridLines: {
                        display: false,  
                    },
                    scaleLabel: {
                        display: true,
                        //labelString: 'Value'
                    },
                    ticks:{
                        beginAtZero: 'true'
                    }
                }]
            },
            legend: {
                display: true,
                //other position options are: bottom, top, left, right
                position: 'top',
                //legend label options 
                labels: {
                  //change rect labels to circles
                  usePointStyle: true,
                  pointStyle: 'circle',
                  padding: 20


                  }
                },
        }
    });