我有一个网站显示足球比赛的内嵌统计数据，我有大量的统计数据，想尝试摆脱表格中一行又一行的数字。我使用 jquery 数据表，并为每行数据添加了一个下拉列表，其中包含更多统计信息。在此下拉列表中，我想要一个画布.js雷达图
问题是我找不到一种方法，必须用大量代码初始化每个图表，然后代码将在表的每一行重复，因为繁忙的时间可能超过 100 个匹配
项下面是我想要实现的代码，但我希望在数据表的每一行中，理想情况下，我想初始化一次图形，在我的数据表中只有一行代码，其中包含数字
有什么想法吗？
<!doctype html>
<html>
<head>
<title>Radar Chart</title>
<script src="dist/2.8.0/Chart.min.js"></script>
<script src="utils.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<button id="save-btn">Save Chart Image</button>
<div style="width:40%">
<canvas id="canvas"></canvas>
</div>
<script>
var randomScalingFactor = function() {
return Math.round(Math.random() * 100);
};
var color = Chart.helpers.color;
var config = {
type: 'radar',
data: {
labels: [['Shots on', ' Target'], ['Shots Off', 'Target'], 'Corners', 'possession (out of 10)'],
datasets: [{
label: 'Home team',
backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
borderColor: window.chartColors.red,
pointBackgroundColor: window.chartColors.red,
data: [
'5',
'7',
'4',
'6',
'2'
]
}, {
label: 'Away Team',
backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
borderColor: window.chartColors.blue,
pointBackgroundColor: window.chartColors.blue,
data: [
'2',
'1',
'3',
'5',
'0'
]
}]
},
options: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'In Play Stats'
},
scale: {
ticks: {
beginAtZero: true
}
}
}
};
window.onload = function() {
window.myRadar = new Chart(document.getElementById('canvas'), config);
};
</script>
</body>
</html>
我能想到的一种方法是创建一个函数，如果你所有的图表都是相似的，只有很少的参数发生变化，例如在下面的示例中，我认为chartId、labels、dataset和title是变化的。您还可以编写函数来创建给定某些参数的数据集：
var randomScalingFactor = function() {
return Math.round(Math.random() * 100);
};
window.chartColors = {
red: 'rgb(255, 99, 132)',
orange: 'rgb(255, 159, 64)',
yellow: 'rgb(255, 205, 86)',
green: 'rgb(75, 192, 192)',
blue: 'rgb(54, 162, 235)',
purple: 'rgb(153, 102, 255)',
grey: 'rgb(201, 203, 207)'
};
var color = Chart.helpers.color;
var labels = [
['Shots on', ' Target'],
['Shots Off', 'Target'], 'Corners', 'possession (out of 10)'
];
var datasets = [{
label: 'Home team',
backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
borderColor: window.chartColors.red,
pointBackgroundColor: window.chartColors.red,
data: ['5', '7', '4', '6', '2']
}, {
label: 'Away Team',
backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
borderColor: window.chartColors.blue,
pointBackgroundColor: window.chartColors.blue,
data: ['2', '1', '3', '5', '0']
}];
window.onload = function() {
window.myRadar = createChart('canvas', labels, datasets, 'In Play Stats');
};
function createChart(chartId, labels, dataset, title) {
return new Chart(document.getElementById(chartId), {
type: 'radar',
data: {
labels: labels,
datasets: dataset
},
options: {
legend: {
position: 'top',
},
title: {
display: true,
text: title
},
scale: {
ticks: {
beginAtZero: true
}
}
}
});
}<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<div style="width:40%; min-width: 700px;">
<canvas id="canvas" style="width: 700px;"></canvas>
</div>