chart.js - 如果标签是假的，ChartJS 不会呈现任何图例

Question

我正在使用 ChartJS 2.4，我想在数据集中预定义很多设置。但是使用一个空数据数组和一个未定义的标签。现在我想阻止 ChartJS 呈现图例，然后显示为“null”或“undefined”。后来我设置了一个合适的标签并开始将数据推送到数据集，最后在图表上调用 update() 效果很好。

这是一个基本的 fiddle使用此代码:

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            fill: false,
            lineTension: 0.1,
            backgroundColor: "rgba(75,192,192,0.4)",
            borderColor: "rgba(75,192,192,1)",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "rgba(75,192,192,1)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(75,192,192,1)",
            pointHoverBorderColor: "rgba(220,220,220,1)",
            pointHoverBorderWidth: 2,
            pointRadius: 5,
            pointHitRadius: 10,
            data: [],
        }
    ]
};

var myLineChart = new Chart("myChart", {
  type: "line",
    data: data
});


setTimeout(function(){
  data.datasets[0].label = "The Label"
  data.datasets[0].data.push(10, 20)
    myLineChart.update()
}, 2000)

我试图覆盖 generateLabels 但我没有成功。并且设置 dateaset.hidden 仅在 true 但不是真正“隐藏”时穿过图例。

编辑 1:另一方面，将 options.legend.display 设置为 false 会永远隐藏所有图例，这也不是我需要的。

Answer 1

让我们创建一个插件，在每次更新开始时，根据第一个数据集的标签是否(分别)定义来决定是否显示图例。 autoDisplayLegend 图表选项启用插件，如果设置为 true。

工作 fiddle 是 here .该代码也可以在下面找到。

var autoDisplayLegendPlugin = {
  // Called at start of update.
  beforeUpdate: function(chartInstance) {
    if (chartInstance.options.autoDisplayLegend) {
      // The first (and, assuming, only) dataset.
      var dataset = chartInstance.data.datasets[0];
      if (dataset.label)
        chartInstance.options.legend.display = true;
      else
        chartInstance.options.legend.display = false;
    }
  }
};

Chart.pluginService.register(autoDisplayLegendPlugin);

var data = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [{
    fill: false,
    lineTension: 0.1,
    backgroundColor: "rgba(75,192,192,0.4)",
    borderColor: "rgba(75,192,192,1)",
    borderCapStyle: 'butt',
    borderDash: [],
    borderDashOffset: 0.0,
    borderJoinStyle: 'miter',
    pointBorderColor: "rgba(75,192,192,1)",
    pointBackgroundColor: "#fff",
    pointBorderWidth: 1,
    pointHoverRadius: 5,
    pointHoverBackgroundColor: "rgba(75,192,192,1)",
    pointHoverBorderColor: "rgba(220,220,220,1)",
    pointHoverBorderWidth: 2,
    pointRadius: 5,
    pointHitRadius: 10,
    data: [],
  }]
};

var myLineChart = new Chart("myChart", {
  type: "line",
  data: data,
  options: {
    // Option to auto display the legend.
    autoDisplayLegend: true
  }
});


setTimeout(function() {
  data.datasets[0].label = "The Label"
  data.datasets[0].data.push(10, 20)
  myLineChart.update()
}, 2000)

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.js"></script>
<canvas id="myChart" width="400" height="250"></canvas>