单击图例时图表js自定义单独图例返回错误

Posted 2023-02-16

【中文标题】单击图例时图表js自定义单独图例返回错误

【英文标题】：Chart js custom separate legend returns error when clicking legend

【发布时间】：2020-11-27 09:23:45

【问题描述】：

试图让折线图与自定义图例一起使用。这适用于圆环图。但不是这个折线图。

单击图例时我不断收到此错误，图表中没有任何变化。

"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  id="weeklyHoursGraph"></canvas>
</div>  

【参考方案1】：

您需要在图表对象上调用getDatasetMeta(index)。

而不是这个...

var meta = ci.getDatasetMeta(0);

试试这个：

var meta = myDarkRadarChart.getDatasetMeta(0);

更新

我发现还有其他问题，主要问题是您始终使用索引为0 的getDatasetMeta()，但您应该使用要隐藏或再次显示的数据集的索引。 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  id="weeklyHoursGraph"></canvas>
</div>

【讨论】：

太棒了！作品！感谢您的帮助！