图表JS自定义单独的图例在单击图例时返回错误

debugcn 发表于 Dev

强尼·普洛

尝试获取折线图以使用自定义图例。这适用于甜甜圈图。但此折线图不适用。

单击图例时，我一直收到此错误，并且图表中没有任何变化。

"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>

uminder

您需要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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。