我正在尝试用Chart.js来构建radar charts。我掌握了基本知识(见下面的基本图表),但我想使用图形的x y坐标将文本直接放置在画布上。
经过一番挖掘,我发现在雷达图中使用getValueForPixel
或getPixelForTick
是不可能的。请参见github issue。在连接线程中,引入了一个新的方法getValueForDistanceFromCenter
。
据我所知,使用此方法可以计算与center
的距离,并使用它来获取坐标。我搜索了Chart.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
});
1条答案
按热度按时间6ie5vjzr1#
radialLinear
标尺(在版本2.9.4中,我看到您使用的是版本2)有一种方法getValueForDistanceFromCenter(value)
可以获得与中心的距离,但还有另一种方法getPointPositionForValue(index, value)
可以在数据的指定索引处提供点。要使用它们并使用这些点在图表上画出你想要的东西,你需要实现一个插件。在下面的代码片段中,我在一个特定值的点之间画了一个矩形。
第一个