主页 / 问题 / 1592246
Accepted
Arteil
Asked:2024-08-29 17:19:02 +0000 UTC2024-08-29 17:19:02 +0000 UTC

构建 Radar Chart.js 图表

  • 772

有一个数据数组

            [88.331566, 161.26106],
            [267.78873, 69.070625],
            [61.81063, 200.0],
            [54.48104, 200.0],
            [48.937656, 200.0],
            [139.215, 70.5277],
            [105.86972, 234.48161],
            [111.62624, 220.65602],
            [12.477702, 197.3125],
            [40.90647, 146.83994],
            [39.692104, 147.6453],
            [11.931946, 91.9375],
            [112.736885, 147.54906],

使用它们你需要构建一个像这样的图表：日程

数组中的第一个值是角度（度）。第二，距图中心的距离。我正在尝试使用 Chart.js 来实现这一点，但也可以通过任何其他方式来完成。屏幕截图中的图表是这样构建的：

labels: [
    0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130,
    140, 150, 160, 170, 180, 190, 200, 210, 220, 230, 240, 250,
    260, 270, 280, 290, 300, 310, 320, 330, 340, 350,
],
datasets: [
    {
        label: "Test",
        backgroundColor: "rgba(179,181,198,0.2)",
        borderColor: "rgba(179,181,198,1)",
        pointBackgroundColor: "rgba(179,181,198,1)",
        pointBorderColor: "#fff",
        pointHoverBackgroundColor: "#fff",
        pointHoverBorderColor: "rgba(179,181,198,1)",
        data: [
            0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130,
            140, 150, 160, 170, 180, 190, 200, 210, 220, 230, 240, 250,
            260, 270, 280, 290, 300, 310, 320, 330, 340, 350
        ],
     },
 ],

问题在于，图的值也必须以数组的形式出现，按顺序排列，即一个标签元素只能有一个值，但根据任务，可以有多个，例如例如，在拐角 10 附近，值为 7 和 12

应该发生什么的视觉示例 应该发生什么的例子

javascript

1 个回答

  1. Best Answer

    data我们有一个存储成对值的数组。[angle, distance]这angle是以度为单位的角度，distance是距图形中心的距离。

    我们将每一对转换为带有键和 的[angle, distance]对象，其中是距离，是角度。这是使用以下方法完成的rthetarthetamap

    然后我们创建一个数组，labels其中包含 0 到 359 度之间每个角度的标签。这些标记将显示在图表的圆圈周围，如您的示例所示

    该数组distances填充了null长度为 360 个元素的值。相应角度的距离值将被写入该数组

    对于数组中指定的每个角度points，我们将相应的距离值写入数组distances。如果多个点具有相同的角度，则仅考虑最后一个值

    接下来是一个数组dataset，其中包含从 0 到 359 度的每个角度的距离。如果某个角度没有距离（即distances[i]等于null），则该值将设置为 0

    让我们生成彩色点pointColors

    适应性有待提高

    使用Chart.js库绘制角度-距离对雷达图的示例

    const data = [
  [88.331566, 161.26106],
  [267.78873, 69.070625],
  [61.81063, 200.0],
  [54.48104, 200.0],
  [48.937656, 200.0],
  [139.215, 70.5277],
  [105.86972, 234.48161],
  [111.62624, 220.65602],
  [12.477702, 197.3125],
  [40.90647, 146.83994],
  [39.692104, 147.6453],
  [11.931946, 91.9375],
  [112.736885, 147.54906],
];

// Преобразование данных в точки с углом и расстоянием
const points = data.map(([angle, distance]) => ({
  r: distance, // расстояние от центра
  theta: angle // угол в градусах
}));

// Создание меток для каждого угла от 0 до 359 градусов
const labels = Array.from({
  length: 360
}, (_, i) => i);

// Создание массива для расстояний, инициализированного значениями null
const distances = new Array(360).fill(null);

// Заполнение массива distances значениями расстояний на соответствующих углах
points.forEach(point => {
  distances[Math.round(point.theta)] = point.r;
});

// Создание финального набора данных, где для каждого угла есть соответствующее расстояние
const dataset = labels.map((label, i) => distances[i] || 0);

// Генерация случайных цветов для каждой точки на графике
const pointColors = dataset.map(() => `hsl(${Math.random() * 360}, 100%, 50%)`);

// Настройка и отрисовка графика radar с использованием Chart.js
const ctx = document.getElementById('myRadarChart').getContext('2d');
const myRadarChart = new Chart(ctx, {
  type: 'radar',
  data: {
    labels: labels, // Угловые метки
    datasets: [{
      label: 'Distance from center', // Подпись набора данных
      data: dataset, // Расстояния для каждого угла
      backgroundColor: 'rgba(54, 162, 235, 0)', // Прозрачный фон для набора данных
      borderColor: 'rgba(54, 162, 235, 0)', // Прозрачный цвет линий (линии скрыты)
      pointBackgroundColor: pointColors, // Цвета точек на графике
      pointBorderColor: '#fff', // Цвет обводки точек
      pointHoverBackgroundColor: pointColors, // Цвета точек при наведении
      pointHoverBorderColor: 'rgba(54, 162, 235, 1)', // Цвет обводки точек при наведении
      pointRadius: 5, // Размер точек
      borderWidth: 0, // Толщина линий (линии скрыты)
      fill: false // Отключаем заливку области под графиком
    }]
  },
  options: {
    scales: {
      r: {
        angleLines: {
          display: true // Отображение линий для каждого угла
        },
        ticks: {
          display: true, // Отображение меток на круговой шкале
          suggestedMin: 0, // Минимальное значение шкалы
          suggestedMax: Math.max(...dataset) // Максимальное значение шкалы
        },
        pointLabels: {
          fontSize: 10, // Размер шрифта угловых меток
          callback: function(value, index) {
            // Отображение метки только на каждом 10-м значении
            return index % 10 === 0 ? value : '';
          }
        }
      }
    },
    plugins: {
      legend: {
        display: true, // Отображение легенды
        position: 'top' // Позиция легенды сверху
      }
    }
  }
});
    body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f4f4f4;
}

canvas {
  max-width: 80%;
  max-height: 80%;
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Radar Chart Example</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

</head>

<body>

  <canvas id="myRadarChart"></canvas>



</body>

</html>

    • 0

相关问题