Chart.js-同一页上有多个generateLegend()函数

Question

所以我最近一直在尝试Chart.js，我正在做一个项目，我需要动态循环三个图表，我需要每个图表都有自己的自定义图例，由generateLegend((函数生成。问题是图例的功能不正确。单击任何图例似乎只会影响图表的最后一次迭代，这意味着无论我单击哪个图表的图例，最后一个图表都只会受到影响。这是代码：

jQuery(document).ready(function($) {
if ($(".stats-content__chart__embed").length) {
var chartCount = $(".stats-content__chart__embed").length;
var chartCounter = 1;
window.toggleVisibility = function(element) {
$(element).toggleClass("striken");
}
while (chartCounter <= chartCount) {
var statsChartOptions = {
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
stepSize: 1000
}
}]
},
legendCallback: function(chart) {
var legendHtml = [];
for (var i = 0; i < chart.data.datasets.length; i++) {                  
if (chart.data.datasets[i].label) {
legendHtml.push('<li class="stats-content__chart__legend__item" onclick="toggleVisibility(this); updateDataset(event, ' + ''' + chart.legend.legendItems[i].datasetIndex + ''' + ')"><span>' + chart.data.datasets[i].label + '</span></li>');
}                                                                              
}                                                                                                                                        
return legendHtml.join("");                                                        
},                                                                                     
legend: {                                                                              
display: false                                                                     
}                                                                                 
};    
// You can ignore this
if ($(".stats-content").eq(chartCounter - 1).find(".stats-content__chart__datasets").length) {
var chartDatasets = $(".stats-content").eq(chartCounter - 1).find(".stats-content__chart__datasets");
var datasetsCount = chartDatasets.length;
var datasetsArray = [];
var datasetsLineColors = ["rgb(0,42,72)", "rgb(0,174,239)"];
for (var i = 0; i < datasetsCount; i++) {
var dataEntry = chartDatasets.eq(i).find("span").length;
var datasetLineColor;
var dataArrayString = [];
for (var x = 0; x < dataEntry; x++) {
var dataValue = chartDatasets.eq(i).find("span").eq(x).text();
dataArrayString.push(dataValue);
var dataArrayNumbers = dataArrayString.map(Number);
}
if ($(this).find("h6").length) {
var datasetLabel = chartDatasets.eq(i).find("h6").text();
}
if (i % 2 == 0) {
datasetLineColor = datasetsLineColors[0];
} else {
datasetLineColor = datasetsLineColors[1];
}
datasetsArray.push({
label: datasetLabel,
backgroundColor: "transparent",
lineTension: 0,
pointBackgroundColor: "transparent",
pointBorderColor: "transparent",
borderColor: datasetLineColor,
data: dataArrayNumbers,
borderWidth: 2
});
}
} 
if ($(".stats-content").eq(chartCounter - 1).find(".stats-content__chart__labels > span").length) {
var chartDatasetLabels = $(".stats-content").eq(chartCounter - 1).find(".stats-content__chart__labels > span");
var labelCount = chartDatasetLabels.length;
var labelsArray = [];
for (var i = 0; i < labelCount; i++) {
var labelText = chartDatasetLabels.eq(i).text();
labelsArray.push(labelText);
}
}
// Ignore all the way to here
var ctx = document.getElementById("stats-content__chart__embed-" + chartCounter).getContext("2d");
window.statsChart = new Chart(ctx, {
type: 'line',
data: {
labels: labelsArray,
datasets: datasetsArray
},
options: statsChartOptions
});
updateDataset = function(e, datasetIndex) {
var index = datasetIndex;
var ci = e.view.statsChart;
var meta = ci.getDatasetMeta(index);
meta.hidden = meta.hidden === null? !ci.data.datasets[index].hidden : null;
ci.update();
};
document.getElementById("stats-content__chart__legend-" + chartCounter).innerHTML = window.statsChart.generateLegend();
chartCounter++;
}
}
});

你可以忽略我放在评论里的代码，因为这与问题无关(我收到评论说它太大了，所以我尽量减轻你们的压力，哈哈(。请给我任何类型的帮助。我真的很需要它。这也是它的HTML，以防它在任何方面都有帮助(实际内容是通过Wordpress的高级自定义字段插件动态生成的(。

<?php if ( have_rows( 'stats_tabs' ) ) : ?>
<div id="statsTabContent" class="tab-content stats-holder">
<?php while ( have_rows( 'stats_tabs' ) ) : the_row();
$index = get_row_index(); ?>
<div class="tab-pane fade <?php echo ( $index == 1 ) ? 'in active' : '' ?> stats-content" id="tab-<?php echo $index; ?>">
<ul id="stats-content__chart__legend-<?php echo $index; ?>" class="stats-content__chart__legend"></ul>
<div class="stats-content__description">
<?php the_sub_field( 'tab_description' ); ?>
</div>
<div class="stats-content__chart__holder">
<?php if ( have_rows( 'tab_dataset' ) ) :
while ( have_rows( 'tab_dataset' ) ) : the_row(); ?>
<div class="stats-content__chart__datasets">
<h6><?php the_sub_field( 'dataset_label' ); ?></h6>
<?php if ( have_rows( 'dataset_data' ) ) :
while ( have_rows( 'dataset_data' ) ) : the_row(); ?>
<span><?php the_sub_field( 'dataset_value' ); ?></span>
<?php endwhile;
endif; ?>
</div>
<?php endwhile;
endif; ?>
<div class="stats-content__chart__labels">
<?php if ( have_rows( 'tab_labels' ) ) :
while ( have_rows( 'tab_labels' ) ) : the_row(); ?>
<span><?php the_sub_field( 'tab_label' ); ?></span>
<?php endwhile;
endif; ?>
</div>
</div>
<div class="stats-content__chart">
<canvas id="stats-content__chart__embed-<?php echo $index; ?>"  class="stats-content__chart__embed"></canvas>
</div>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>

Answer 1

您在每次迭代中都要替换变量，因此该变量自然指的是分配的最后一件事(即创建的最后一张图表(：

while (chartCounter <= chartCount) {
...
window.statsChart = new Chart(ctx, {...});
...
}

单击图例项调用updateDataset，通过以下行返回window.statsChart：

var ci = e.view.statsChart;

由于statsChart被分配给迭代的最后一个图表，您的代码只影响该图表。

将statsChart设为数组并通过onclick传递相关索引，或者简单地将chart对象本身传递给updateDataset(尽管这无法通过内联onclick工作；您需要绑定到元素(。