因此，最近我一直在尝试Chart.js，并且正在开发一个项目，在该项目中我需要动态循环三个Charts，并且我需要它们中的每一个都具有由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; ?>
答案 0 :(得分：0)
您将在每次迭代中替换变量，因此变量自然是指分配的最后一件东西（即创建的最后一个图表）：
while (chartCounter <= chartCount) {
...
window.statsChart = new Chart(ctx, {...});
...
}
点击图例项将调用updateDataset，其中您通过以下行引用回window.statsChart：
var ci = e.view.statsChart;
由于statsChart被分配给最后一个图表，因此您的代码仅影响该图表。
要么将statsChart做成一个数组，然后通过onclick传递相关的索引，要么简单地将chart对象本身传递给updateDataset（尽管不能通过内联方式工作） onclick；您需要绑定到该元素）。