如果标签错误，ChartJS不会呈现任何图例

Question

我正在使用ChartJS2.4，我想在数据集中预先定义很多设置。但使用空数据数组和未定义的标签。现在我想阻止ChartJS呈现图例，该图例随后显示为“null”或“undefined”。稍后，我将设置一个适当的标签，并开始将数据推送到数据集，最后在图表上调用update（），这很好。

下面是对该代码的基本修改：

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只有在真实但并非真正“隐藏”的情况下才会突破传奇。

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




Answer 1

如果需要，可以删除数据集，这样图例就不会显示：

var autoDisplayLegendPlugin = {

beforeUpdate: function(chartInstance) {

if (chartInstance.canvas.id == 'chart6') {
  // The first (and, assuming, only) dataset.
  var dataset = chartInstance.data.datasets[2];
  if (dataset.data.length != 0){ // delete only if there is no data in dataset
    console.log(chartInstance);
    chartInstance.options.legend.display = true;

  }
  else{
    chartInstance.options.legend.display = true;
    chartInstance.data.datasets.pop(); // if is the last datasets you don't want the legend to appear
  }
}
}};

Answer 2

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

一把工作小提琴在这里。代码也可在下面获得。

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>