如何使用 getValueForDistanceFromCenter 和 Chart.js 獲取雷達圖坐標？
[英]How to get radar chart coordinates using getValueForDistanceFromCenter with Chart.js?
問題描述
我正在嘗試使用Chart.js來構建雷達圖。 我掌握了基礎知識（見下面的基本圖表），但我想使用圖形的x y 坐標將文本直接放置在 canvas 上。
經過一番挖掘，我發現在雷達圖中無法使用getValueForPixel或getPixelForTick 。 請參閱此github 問題。 在連接線程中，引入了一個新方法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 個解決方案
解決方案1
0 2022-08-18 08:30:06
radialLinear比例（在 2.9.4 版本中，我看到你使用的是版本 2）有方法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>
Chart.js雷達標簽坐標
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.