ChartJS：设置图表加载时要显示的数据并保存（记住）

Question

我将http://www.chartjs.org/库用于图表，试图在Y轴上显示6个不同的数据点。

同时显示所有内容时会有些混乱，但是我不希望将其拆分为多个图表，因为所有这些数据都是相关的。

我想知道是否可以设置在加载图表时应隐藏哪些数据，然后自己显示其余数据。

还可以某种方式保存这些设置吗？假设我只想显示3种类型的数据，并且在重新加载页面后它会记住我的偏好。

编辑：如果有帮助，这是当前代码。

<canvas id="statsByDayChart" width="400" height="300"></canvas>
    <script>
        var ctx = document.getElementById('statsByDayChart').getContext('2d');

        var profit = {
          label: "Profit",
          data: {!! json_encode($profit) !!},
          borderColor: 'rgba(73, 189, 138, 1)',
          borderWidth: 3,
          backgroundColor: 'rgba(219, 242, 232, 0)',
          pointBorderWidth: 4,
          pointBackgroundColor: '#128ffb',
          yAxisID: 'y-axis-profit',
          type: 'line'
        };

        var cost = {
          label: "Cost",
          data: {!! json_encode($cost) !!},
          borderColor: 'rgba(255, 0, 0, 1)',
          borderWidth: 2,
          backgroundColor: 'rgba(255, 0, 0, 0)',
          pointBorderWidth: 4,
          pointBackgroundColor: '#128ffb',
          yAxisID: 'y-axis-cost',
          type: 'line'
        };

        var ctr = {
          label: "CTR",
          data: {!! json_encode($ctr) !!},
          borderColor: 'rgba(255, 126, 0, 1)',
          borderWidth: 3,
          backgroundColor: 'rgba(255, 126, 0, 0)',
          pointBorderWidth: 4,
          pointBackgroundColor: '#128ffb',
          yAxisID: 'y-axis-ctr',
          type: 'line'
        };

        var holds = {
          label: "Holds",
          data: {!! json_encode($holds) !!},
          borderColor: 'rgb(175, 26, 245, 1)',
          backgroundColor: 'rgb(175, 26, 245, 1)',
          borderWidth: 4,
          pointBorderWidth: 4,
          pointBackgroundColor: '#128ffb',
          yAxisID: 'y-axis-holds',
          type: 'bar',
          fill: true
        };

        var conversions = {
          label: "Conversions",
          data: {!! json_encode($conversions) !!},
          borderColor: 'rgb(54, 162, 235, 1)',
          backgroundColor: 'rgb(54, 162, 235, 1)',
          borderWidth: 5,
          pointBorderWidth: 4,
          pointBackgroundColor: '#128ffb',
          yAxisID: 'y-axis-conversions',
          type: 'bar',
          fill: true
        };

        var impressions = {
          label: "Impressions",
          data: {!! json_encode($displays) !!},
          borderColor: 'rgba(254, 206, 96, 1)',
          backgroundColor: 'rgba(255, 231, 175, 0.8)',
          borderWidth: 6,
          pointBorderWidth: 4,
          borderDash: [20, 6],
          pointBackgroundColor: '#128ffb',
          yAxisID: 'y-axis-impressions',
          type: 'line',
          fill: true
        };

        var chartData = {
          labels: {!! json_encode($days) !!},
          datasets: [profit, cost, ctr, holds, conversions, impressions]
        };

        var lineChart = new Chart(ctx, {
          type: 'bar',
          data: chartData,
          options: {
            legend: {display: true},
            responsive: true,
            maintainAspectRatio: false,
            elements: { line: { tension: 0.05 } },
            scales: {
                xAxes: [{ gridLines: { display: true, offsetGridLines: false }, barPercentage: 1, categoryPercentage: 0.4 }],
                yAxes: [
                    {
                        id: 'y-axis-profit',
                        type: 'linear',
                        gridLines: { display: true },
                        ticks: { beginAtZero: true, min: {{ $profit->min() }}, max: {{ $profit->max() }} },
                        display: true
                    },
                    {
                        id: 'y-axis-cost',
                        type: 'linear',
                        gridLines: { display: false },
                        ticks: { beginAtZero: true, min: {{ $cost->min() }}, max: {{ $cost->max() }} },
                        display: false
                    },
                    {
                        id: 'y-axis-ctr',
                        type: 'linear',
                        gridLines: { display: false },
                        ticks: { beginAtZero: true, min: {{ $ctr->min() }}, max: {{ $ctr->max() }} },
                        display: false
                    },
                    {
                        id: 'y-axis-holds',
                        type: 'linear',
                        gridLines: { display: false },
                        ticks: { beginAtZero: true, min: {{ $holds->min() }}, max: {{ $holds->max() }} },
                        display: false,
                    },
                    {
                        id: 'y-axis-conversions',
                        type: 'linear',
                        gridLines: { display: false },
                        ticks: { beginAtZero: true, min: {{ $conversions->min() }}, max: {{ $conversions->max() }} },
                        display: false,
                    },
                    {
                        id: 'y-axis-impressions',
                        type: 'linear',
                        gridLines: { display: false },
                        ticks: { beginAtZero: true, min: {{ $displays->min() }}, max: {{ $displays->max() }} },
                        display: false
                    }
                ]
            },
            tooltips: { mode: 'index', intersect: false },
            hover: { mode: 'nearest', intersect: true },
          }
        });
    </script>