ChartJS не отображает никаких легенд, если метка ложна

Question

Я использую ChartJS 2.4, и я хочу предопределить множество настроек в наборах данных уже. Но используйте пустой массив данных и неопределенный ярлык. Теперь я хочу, чтобы ChartJS не отображал легенду, которая затем отображается как «null» или «undefined». Позже я устанавливаю надлежащую метку и начинаю толкать данные в dataSet и, наконец, вызывать 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 только ударяет по легенде, если она истинна, но не «скрывается».

EDIT 1: С другой стороны, установка options.legend.display на ложь скрывает все легенды и навсегда, это тоже не то, что мне нужно.

Answer 1

Давайте создадим плагин, который, в начале каждого обновления, решает, следует ли отображать легенду или нет в зависимости от того является (соответственно) определено или не метка первого набора данных. Опция диаграммы autoDisplayLegend включает плагин, если он установлен в true.

Рабочая скрипка 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>