ChartJS：多个数据集，折叠栏 - IF NULL

Question

我使用Chart.js在单个图表上创建了一个包含多个数据集的图表，并遇到了一个独特的问题，我想要隐藏具有NULL值的条形图。

这是我迄今取得的成就

下面的

是我使用的图表的代码。

$(function () { 
        var barChartCanvas = $("#enrollments").get(0).getContext("2d");
        var barChart = new Chart(barChartCanvas);
        var x_axis_labels = ["1st", "2nd", "3rd", "4th", "5th", "6th", "7th", "8th", "9th", "10th"];
        var y_axis_labels = ["50", "510", "480", "480", "480", "486", "490", "493", "500", "498"]; // section1
        var y_axis_labels2 = ["", "510", "480", "480", "480", "486", "490", "493", "500", "498"]; // section2
        var y_axis_labels3 = ["200", "510", "480", "480", "480", "486", "490", "493", "500", "498"]; // section3

        var areaChartData = {
            labels: x_axis_labels,
            datasets: [{
                    label: "# of Students",
                    fillColor: "rgba(233, 30, 99, 0.9)",
                    strokeColor: "rgba(233, 30, 99, 0.9)",
                    pointColor: "rgba(233, 30, 99, 0.9)",
                    pointStrokeColor: "rgba(233, 30, 99, 0.9)",
                    pointHighlightFill: "rgba(233, 30, 99, 0.9)",
                    pointHighlightStroke: "rgba(60,141,188,1)",
                    data: y_axis_labels
                },{
                    label: "# of Students",
                    fillColor: "rgba(233, 30, 99, 0.9)",
                    strokeColor: "rgba(233, 30, 99, 0.9)",
                    pointColor: "rgba(233, 30, 99, 0.9)",
                    pointStrokeColor: "rgba(233, 30, 99, 0.9)",
                    pointHighlightFill: "rgba(233, 30, 99, 0.9)",
                    pointHighlightStroke: "rgba(60,141,188,1)",
                    data: y_axis_labels2
                },{
                    label: "# of Students",
                    fillColor: "rgba(233, 30, 99, 0.9)",
                    strokeColor: "rgba(233, 30, 99, 0.9)",
                    pointColor: "rgba(233, 30, 99, 0.9)",
                    pointStrokeColor: "rgba(233, 30, 99, 0.9)",
                    pointHighlightFill: "rgba(233, 30, 99, 0.9)",
                    pointHighlightStroke: "rgba(60,141,188,1)",
                    data: y_axis_labels3
                }
            ]
        };
        var barChartData = areaChartData;

        var barChartOptions = {
            scaleBeginAtZero: true,
            scaleShowGridLines: true,
            scaleGridLineColor: "rgba(0,0,0,.05)",
            scaleGridLineWidth: 1,
            scaleShowHorizontalLines: true,
            scaleShowVerticalLines: true,
            barShowStroke: true,
            barStrokeWidth: 2,
            barValueSpacing: 5,
            barDatasetSpacing: 1,
            legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",

            responsive: true,
            maintainAspectRatio: true
        };

        barChartOptions.datasetFill = true;
        barChart.Bar(barChartData, barChartOptions);
    });