我正在试验Chart.js来构建雷达图。我掌握了基础知识(见下面的基本图表)，但我想使用图表的x y 坐标将文本直接放置在画布上。
经过一番挖掘，我发现不可能在雷达图中使用getValueForPixel或getPixelForTick。请参阅此 github 问题。在连接线程中，引入了一种新的方法getValueForDistanceFromCenter。
据我了解，可以使用此方法计算与center的距离，并使用它来获取坐标。我搜索了图表.js文档和其他站点，但找不到任何代码示例或有关如何实现此功能的信息。
有人可以指出如何在代码中实现该方法的正确方向吗？
var data = {
labels: ["Ball Skills", "Shooting", "Physical"],
datasets: [{
label: [`ikke`, `jij`],
backgroundColor: "rgba(38,120,255,0.2)",
borderColor: "rgba(38,120,255, 1)",
data: [90, 90, 90]
}]
};
var options = {
responsive: true,
tooltips: false,
title: {
text: 'Basic example',
display: true,
position: `bottom`,
},
scale: {
angleLines: {
display: true
},
ticks: {
suggestedMin: 0,
suggestedMax: 100,
stepSize: 25,
maxTicksLimit: 11,
display: false,
}
},
legend: {
labels: {
padding: 10,
fontSize: 14,
lineHeight: 30,
},
},
};
var myChart = new Chart(document.getElementById("chart"), {
type: 'radar',
data: data,
options: options
});radialLinear刻度(在我看到您使用版本 2.9.4 的版本中)有一种方法getValueForDistanceFromCenter(value)来获取与中心的距离，但还有另一种方法getPointPositionForValue(index, value)它可以为您提供数据特定索引处的点。
要使用它们并使用这些点在图表上绘制您想要的内容，您需要实现一个插件。 在下面的代码片段中，我将在特定值的点之间绘制一个矩形。
const ctx = document.getElementById("myChart");
const data = {
labels: ["Ball Skills", "Shooting", "Physical"],
datasets: [{
label: [`ikke`, `jij`],
backgroundColor: "rgba(38,120,255,0.2)",
borderColor: "rgba(38,120,255, 1)",
data: [50, 50, 50]
}]
};
const options = {
responsive: true,
tooltips: false,
title: {
text: 'Basic example',
display: true,
position: `bottom`,
},
scale: {
angleLines: {
display: true
},
ticks: {
suggestedMin: 0,
suggestedMax: 100,
stepSize: 25,
maxTicksLimit: 11,
display: false,
}
},
legend: {
labels: {
padding: 10,
fontSize: 14,
lineHeight: 30,
},
},
};
const plugin = {
id: 'getDistance',
afterDraw(chart) {
const c = chart.ctx;
const rScale = chart.scale;
c.save();
chart.data.datasets[0].data.forEach(function(item, index) {
const point = rScale.getPointPositionForValue(0.5 + index, 50);
c.beginPath();
c.fillStyle = 'red';
c.fillRect(point.x - 5, point.y - 5, 10, 10);
c.fill();
});
c.restore();
}
};
const myChart = new Chart(ctx, {
type: 'radar',
plugins: [plugin],
data: data,
options: options
});.myChartDiv {
max-width: 600px;
max-height: 400px;
}<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
<html>
<body>
<div class="myChartDiv">
<canvas id="myChart" width="600" height="400"/>
</div>
</body>
</html>