Диаграмма js настраиваемая отдельная легенда возвращает ошибку при нажатии на легенду - PullRequest
Новая
       93

Диаграмма js настраиваемая отдельная легенда возвращает ошибку при нажатии на легенду

0 голосов
/ 07 августа 2020

Попытка заставить линейную диаграмму работать с настраиваемой легендой. Это работает с кольцевой диаграммой. Но не с этой линейной диаграммой.

Я продолжаю получать эту ошибку при нажатии на легенду, и в диаграмме ничего не меняется. 

"Uncaught TypeError: Cannot read property 'getDatasetMeta' of undefined"

- Есть идеи? 

Charts.prototype.initLineCurved = function () {
        
    var chartData = {
        type: 'line',
        data: {},
        options: {  
            legend: {
                display: false
            }           
        }
    };
    var linegraphWeekly = document.getElementById('weeklyHoursGraph').getContext('2d');
    var myDarkRadarChart = new Chart(linegraphWeekly, chartData);
        
    updateDatasetGraphs = function (e, datasetIndex) { 
        var index = datasetIndex;
        var ci = e.view.myDarkRadarChart;
        var meta = ci.getDatasetMeta(0);    
        var result = (meta.data[index].hidden == true) ? false : true;
        if(result == true)
        {
            meta.data[index].hidden = true;
            $('#' + e.path[0].id).css('color', '#cbd0d5');
        }else{
            $('#' + e.path[0].id).css('color', '#000');
            meta.data[index].hidden = false;
        }
        ci.update();                
    }
}

А легенда ... 

<div class="legend-container">
    <div class="graph_legend">
        <a id="weekly-legend-0-item" onclick="updateDatasetGraphs(event,0)">This Week</a>
        <a id="weekly-legend-1-item" onclick="updateDatasetGraphs(event,1)">Last Week</a>
    </div>
</div>                          
<div class="graph">
    <canvas height="400" id="weeklyHoursGraph"></canvas>
</div>

1 Ответ

0 голосов
/ 07 августа 2020

Вам необходимо вызвать getDatasetMeta(index) на вашем объекте диаграммы.

Вместо этого ... 

var meta = ci.getDatasetMeta(0);

попробуйте следующее: 

var meta = myDarkRadarChart.getDatasetMeta(0);

ОБНОВЛЕНИЕ

Я вижу, что есть и другие проблемы, главная из них - вы всегда getDatasetMeta() с индексом 0, но вы должны использовать индекс набор данных, который вы собираетесь скрыть или показать снова. updateDatasetGraphs() можно упростить следующим образом: 

function updateDatasetGraphs(e, datasetIndex) {
  var meta = myDarkRadarChart.getDatasetMeta(datasetIndex);
  meta.hidden = !meta.hidden;  
  if (meta.hidden) {   
    $('#' + e.path[0].id).css('color', '#cbd0d5');
  } else {
    $('#' + e.path[0].id).css('color', '#000');    
  }
  myDarkRadarChart.update();
};

Пожалуйста, обратите внимание на ваш измененный код ниже: 

var myDarkRadarChart = new Chart('weeklyHoursGraph', {
  type: 'line',
  data: {
    labesl: ['A', 'B', 'C', 'D', 'E'],
    datasets: [{      
      data: [2, 4, 6, 1, 3],
    },
    {      
      data: [4, 5, 7, 5, 4],
    }
    ]
  },
  options: {
    legend: {
      display: false
    }    
  }
});

function updateDatasetGraphs(e, datasetIndex) {
  var meta = myDarkRadarChart.getDatasetMeta(datasetIndex);
  meta.hidden = !meta.hidden;  
  if (meta.hidden) {   
    $('#' + e.path[0].id).css('color', '#cbd0d5');
  } else {
    $('#' + e.path[0].id).css('color', '#000');    
  }
  myDarkRadarChart.update();
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<div class="legend-container">
  <div class="graph_legend">
    <a id="weekly-legend-0-item" onclick="updateDatasetGraphs(event,0)">This Week</a>
    <a id="weekly-legend-1-item" onclick="updateDatasetGraphs(event,1)">Last Week</a>
  </div>
</div>
<div class="graph">
  <canvas height="100" id="weeklyHoursGraph"></canvas>
</div>
...