javascript - 使用 Charts.JS 显示标签
问题描述
我用 chart.js 创建了一个雷达图，但是，我在显示我的数据点的真实数据时遇到了问题。我使用了 chart.js 标签插件，但它显示了数据点绘制的点。我将如何获得它，以便显示我的真实数据以及标签而不是绘制它的点。非常感谢！
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Apples</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<meta name="theme-color" content="#fafafa">
<script src="js/vendor/modernizr-3.8.0.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"></script>
</head>
<body>
<center><h3>Apple Values</h3></center>
<canvas id="Apple"></canvas>
<script>
var ctx = document.getElementById('Apple');
var real_data = [
['133', '425', '222', '621', '151'],
];
var data = {
labels: ['X', 'Y','Z','N','A'],
datasets: [{
label: 'Apples',
data: [.41, .5, .33, .72, .64],
backgroundColor: 'rgba(101,81,255,0.2)',
borderColor: 'rgba(101,81,255,0.5)',
borderWidth: 1,
pointBackgroundColor: 'rgba(0, 0, 0, 0.4)'
}]
};
var options = {
tooltips: {
callbacks: {
title: function(t, d) {
let title = d.datasets[t[0].datasetIndex].label;
return title;
},
label: function(t, d) {
let title = d.datasets[t.datasetIndex].label;
let label = d.labels[t.index];
let value = (title != 'Average') ? real_data[t.datasetIndex][t.index] : d.datasets[t.datasetIndex].data[t.index];
return label + ': ' + value;
}
}
}
};
var chart = new Chart(ctx, {
type: 'radar',
data: data,
options: options
});
</script>
</body>
</html>解决方案
您可以在绘制图表后使用插件来更改图表，也可以使用控制器来更改图表的绘制方式，因为没有直接的方法来操作图表的呈现。这些是链接：
https://www.chartjs.org/docs/latest/developers/plugins.html https://www.chartjs.org/docs/latest/developers/charts.html#extending-existing-chart-types
对于您的特定示例，这是使用插件的代码，两者中较容易的；
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Apples</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<meta name="theme-color" content="#fafafa">
<script src="js/vendor/modernizr-3.8.0.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"></script>
</head>
<body>
<center><h3>Apple Values</h3></center>
<canvas id="Apple"></canvas>
<script>
var ctx = document.getElementById('Apple');
var real_data = [
['133', '425', '222', '621', '151'],
];
var data = {
labels: ['X', 'Y','Z','N','A'],
datasets: [{
label: 'Apples',
data: [.41, .5, .33, .72, .64],
backgroundColor: 'rgba(101,81,255,0.2)',
borderColor: 'rgba(101,81,255,0.5)',
borderWidth: 1,
pointBackgroundColor: 'rgba(0, 0, 0, 0.4)'
}]
};
var options = {
tooltips: {
callbacks: {
title: function(t, d) {
let title = d.datasets[t[0].datasetIndex].label;
return title;
},
label: function(t, d) {
let title = d.datasets[t.datasetIndex].label;
let label = d.labels[t.index];
let value = (title != 'Average') ? real_data[t.datasetIndex][t.index] : d.datasets[t.datasetIndex].data[t.index];
return label + ': ' + value;
}
}
}
};
var plugins = [{
afterDatasetsDraw: function(chart) {
var real_data = ['133', '425', '222', '621', '151'];
var ctx = chart.ctx;
chart.data.datasets.forEach(function(dataset, index) {
var datasetMeta = chart.getDatasetMeta(index);
if (datasetMeta.hidden) return;
datasetMeta.data.forEach(function(point, index) {
var value = real_data[index],
x = point.getCenterPoint().x,
y = point.getCenterPoint().y,
radius = point._model.radius,
fontSize = 14,
fontFamily = 'Verdana',
fontColor = 'black',
fontStyle = 'normal';
ctx.save();
ctx.textBaseline = 'middle';
ctx.textAlign = 'center';
ctx.font = fontStyle + ' ' + fontSize + 'px' + ' ' + fontFamily;
ctx.fillStyle = fontColor;
ctx.fillText(value, x, y - radius - fontSize);
ctx.restore();
});
});
}
}]
var chart = new Chart(ctx, {
type: 'radar',
data: data,
options: options,
plugins: plugins
});
</script>
</body>
</html>