Question

我正在使用Angular 5和Chart.js处理项目。我需要在我的图表中创建自定义图例，所以我按照这个git问题来帮助我：Github Issue Chart.js。

这是非常有用的，它只能使用纯javascript工作，但尝试将示例回复到Angular 5应用程序只是不起作用，它抛出我 this.updateDataset（）是不是功能 。以下是我目前在选项 object of Chart.js library中所做的一段话：

legendCallback: (chart) => {
        const legendHtml = [];
        legendHtml.push('<table>');
        legendHtml.push('<tr>');
        for (let i=0; i<chart.data.datasets.length; i++) {
            const color    = chart.data.datasets[i].borderColor;
            const legendId = 'linear-d'+i;
            legendHtml.push(
                '<td onclick="this.updateDataset(event,' + '\'' + chart.legend.legendItems[i].datasetIndex + '\'' + ', ' + '\'' + legendId + '\'' + ')">' +
                '<div id="'+legendId+'-square" style="background-color:' + color +'; border: 2px solid ' + color +'; width: 15px; height: 15px;"></div>' +
                '</td>'
            );
            if (chart.data.datasets[i].label) {
                legendHtml.push('<td id="'+legendId+'-text" style="cursor: default; font-size: 12px;" onclick="this.updateDataset(event,' + '\'' + chart.legend.legendItems[i].datasetIndex + '\'' + ', ' + '\'' + legendId + '\'' + ')">' + chart.data.datasets[i].label + '</td>');
            }
        }
        legendHtml.push('</tr>');
        legendHtml.push('</table>');
        return legendHtml.join("");
    },

因此，重要的部分是'<td onclick="this.updateDataset(event,' + '\'' + chart.legend.legendItems[i].datasetIndex + '\'' + ', ' + '\'' + legendId + '\'' + ')">'，其中 onclick 正在尝试调用 this.updateDataset（）。

我应该如何将函数 updateDataset（）调用到该元素的 onclick 事件中，或者我应该如何声明该函数以便我可以从 onclick 事件。

Answer 1

这不是一个简洁的解决方案，但它是我迄今为止唯一找到的解决方案。添加新图例后，我添加了 eventListener ，而不是使用onclick事件。然后，您需要对 updateDataset（）函数进行细微更改。

legendCallback 应如下所示：

legendCallback: (chart) => {
      var legendHtml = [];
      legendHtml.push('<table>');
      legendHtml.push('<tr>');
      for (var i=0; i<chart.data.datasets.length; i++) {
          legendHtml.push('<td><div class="chart-legend" style="background-color:' + chart.data.datasets[i].backgroundColor + '"></div></td>');                    
          if (chart.data.datasets[i].label) {
              legendHtml.push('<td class="chart-legend-label-text" id="' + chart.id + '_' + chart.legend.legendItems[i].datasetIndex + '">' + chart.data.datasets[i].label + '</td>');
          }
      }                                                                                  
      legendHtml.push('</tr>');                                                          
      legendHtml.push('</table>');
      return legendHtml.join("");                                                        
    },

然后在声明图表后添加侦听器和 updateDataset（）函数：

document.getElementById("customLegend" + this.chartId).innerHTML = myChart.generateLegend();
var legenTags = document.getElementsByClassName("chart-legend-label-text");
var updateDataset = function(e) {
  var id = e.currentTarget.id;
  var index = id.split('_')[1];
  var chartId= id.split('_')[0];
  if (myChart.id == chartId) {
    var meta = myChart.getDatasetMeta(index);
    // See controller.isDatasetVisible comment
    meta.hidden = meta.hidden === null? !myChart.data.datasets[index].hidden : null;

    // We hid a dataset ... rerender the chart
    myChart.update();
  }
}

for (var i = 0; i < legenTags.length; i++) {
  legenTags[i].addEventListener('click', updateDataset, false);
}

我希望它有所帮助。如果有人有更好的解决方案，请分享。

自定义图例Chart.js / Angular 5上的OnClick事件

1 个答案: