Chart.js 数据不显示时隐藏Y轴标签

Question

我有一个 Chart.js 条形图显示两组数据：总计 SQL 查询和慢速 SQL 查询。 每组数据都有 Y 轴标签。 该图如下所示：

当我将其中一组数据切换为不显示时，相应的 Y 轴标签仍然显示。 在解释图表时，这有点令人困惑。 如下所示：

我的问题：如何隐藏当前未显示的任何数据集的 Y 轴标签？

这就是我目前设置图表的方式：

<canvas id="SQLPerformanceChart" minHeight="400"></canvas>
<script type="text/javascript">
    ...
    var data = {
        labels: labelArray,
        datasets: [{
            label: "Total SQL Queries",
            fill: false,
            borderWidth: 1,
            borderColor: "green",
            backgroundColor: "rgba(0, 255, 0, 0.3)",
            yAxisID: "y-axis-0",
            data: totalQueriesArray
        }, {
            label: "Slow SQL Queries",
            fill: false,
            borderWidth: 1,
            borderColor: "orange",
            backgroundColor: "rgba(255, 255, 0, 0.3)",
            yAxisID: "y-axis-1",
            data: slowQueriesArray,
        }]
    };

    var options = {
        animation: false,
        scales: {
            yAxes: [{
                position: "left",
                ticks: {
                    beginAtZero: true
                },
                scaleLabel: {
                    display: true,
                    labelString: 'Total SQL Queries'
                },
                id: "y-axis-0"
            }, {
                position: "right",
                ticks: {
                    beginAtZero: true
                },
                scaleLabel: {
                    display: true,
                    labelString: 'Slow SQL Queries'
                },
                id: "y-axis-1"
            }]
        },
        tooltips: {
            enabled: true,
            mode: 'single',
            callbacks: {
                title: function(tooltipItem, data) {
                    return data.label;
                },
                beforeLabel: function(tooltipItem, data) {
                    if (tooltipItem.index == 24) {
                        return data.labels[tooltipItem.index] + " - Now";
                    } else {
                        return data.labels[tooltipItem.index] + " - " + data.labels[(tooltipItem.index) + 1];
                    }
                }
            }
        }
    }

    var ctx = document.getElementById("SQLPerformanceChart");
    var SQLPerformanceChart = new Chart(ctx, {
        type: 'bar',
        data: data,
        options: options
    });
</script>

Answer 1

您可以向ongends onClick添加回调函数：

var options = {
        animation: false,
        scales: {
            yAxes: [{
                position: "left",
                ticks: {
                    beginAtZero: true
                },
                scaleLabel: {
                    display: true,
                    labelString: 'Total SQL Queries'
                },
                id: "y-axis-0"
            }, {
                position: "right",
                ticks: {
                    beginAtZero: true
                },
                scaleLabel: {
                    display: true,
                    labelString: 'Slow SQL Queries'
                },
                id: "y-axis-1"
            }]
        },
        legend: {
        onClick: function(event, legendItem) {
            //get the index of the clicked legend
            var index = legendItem.datasetIndex;
            //toggle chosen dataset's visibility
            SQLPerformanceChart.data.datasets[index].hidden = 
                !SQLPerformanceChart.data.datasets[index].hidden;
            //toggle the related labels' visibility
            SQLPerformanceChart.options.scales.yAxes[index].display =                 
                !SQLPerformanceChart.options.scales.yAxes[index].display;
            SQLPerformanceChart.update();
        }
        }
    }

Answer 2

如果您使用angular-chartjs ，并且要将此行为应用于所有显示的图表 ，则此解决方案适用。

如果您想跳到代码， 请检查此fiddlejs 。

您还可以检查其他fiddlejs以检查默认的Angular-Chartjs行为。

---

一步步：

我使用angular-chart.js中的第一个图表示例 ，所以这将是点击后的最终结果：

    <div ng-app="app" ng-controller="MainController as mainCtrl">  
        <canvas id="line" class="chart chart-line" chart-data="data"
        chart-labels="labels" chart-series="series" chart-options="options"
        chart-dataset-override="datasetOverride" chart-click="onClick">
      </canvas>
    </div>

1. 替换全局图表的处理程序：

Chart.defaults.global.legend.onClick = function (e, legendItem) {
  var idx = legendItem.datasetIndex;

  // IMPORTANT charts will be created in the second and third step
  var chart = charts[e.srcElement.id];
  chart.options.scales.yAxes[idx].display = !chart.options.scales.yAxes[idx].display;

  var meta = chart.getDatasetMeta(idx);
  // See controller.isDatasetVisible comment
  meta.hidden = meta.hidden === null ? !chart.data.datasets[idx].hidden : null;

  chart.update();

};

2. 创建一个全局变量charts以便我们可以使用画布ID访问每个图表：

var charts = {};

3. 使用chart-create事件填写图表变量：

angular.module("app", ["chart.js"]).controller("MainController", function ($scope) {
  $scope.$on('chart-create', function (event, chart) {
    charts[chart.chart.canvas.id] = chart;
  });

  $scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
  $scope.series = ['Series A', 'Series B'];
  $scope.data = [...

我希望有更好的方法从画布id获取图表，但据我所知这是开发人员建议的方式 。

Answer 3

如果您将ng2-charts与chart.js和Angular 7 ^一起使用，并且如果要将此行为应用于所有显示的图表，则此解决方案适用。

    import Chart from chart.js
    Chart.defaults.global.legend.onClick = function (e: MouseEvent, chartLegendLabelItem: ChartLegendLabelItem) {
  const idx: number = chartLegendLabelItem.datasetIndex;
  const chart = this.chart;
  chart.options.scales.yAxes[idx].display = !chart.options.scales.yAxes[idx].display;

  const meta = chart.getDatasetMeta(idx);
  meta.hidden = meta.hidden === null ? !chart.data.datasets[idx].hidden : null;

  chart.update();

};

或者用于本地配置

    legend: <ChartLegendOptions>{
         onClick: function (e: MouseEvent, chartLegendLabelItem:ChartLegendLabelItem) {
      const idx: number = chartLegendLabelItem.datasetIndex;
      const chart = this.chart;
      chart.options.scales.yAxes[idx].display = 
     !chart.options.scales.yAxes[idx].display;

      const meta = chart.getDatasetMeta(idx);
      meta.hidden = meta.hidden === null ? 
             !chart.data.datasets[idx].hidden : null;

      chart.update();

    }
}

Answer 4

我使用 v3.8.0 遇到了这个问题，但没有一个对我有用。 这段代码对我有用。 注意我将所有图表实例存储在 Map 中，因为我在同一页上有多个图表。

var instances = new Map();

创建 incances 时，我将它们放在那里。

现在隐藏 y 轴 label 和图例上的数据点击：

 onClick: function (event, legendItem) {
                            var instance = instances.get(event.chart.id);
                            var meta = instance.getDatasetMeta(legendItem.datasetIndex);
                            var newValue = !meta.yScale.options.display;
                            meta.hidden = meta.yScale.options.display;
                            meta.yScale.options.display = newValue;
                            instance.update();
                        }