ChartJS не выводит никаких легенд, если метка является ложной

Я использую ChartJS 2.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.скрытое только поражает через легенду, если это правда, но на самом деле не "скрывает".

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

1 2
chart.js

1 ответ:

Давайте создадим плагин, который в начале каждого обновления решает, отображать легенду или нет, основываясь на том, определена ли метка первого набора данных (соответственно) или нет. Опция autoDisplayLegend chart включает плагин, если установлено значение 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>
1