如何确定图表Javascript的最小和最大程度

Question

我有一个来自图表和 JavaScript 代码的命运轮。我复制 [https://www.codewithrandom.com/2023/11/24/spin-wheel-app-using-javascript/]（此网站），一切正常。

我想做的是减少或增加奖品，在这个例子中奖品是12件，这是代码

/* --------------- Minimum And Maximum Angle For A value  --------------------- */
const spinValues = [
  { minDegree: 61, maxDegree: 90, value: 100 },
  { minDegree: 31, maxDegree: 60, value: 200 },
  { minDegree: 0, maxDegree: 30, value: 300 },
  { minDegree: 331, maxDegree: 360, value: 400 },
  { minDegree: 301, maxDegree: 330, value: 500 },
  { minDegree: 271, maxDegree: 300, value: 600 },
  { minDegree: 241, maxDegree: 270, value: 700 },
  { minDegree: 211, maxDegree: 240, value: 800 },
  { minDegree: 181, maxDegree: 210, value: 900 },
  { minDegree: 151, maxDegree: 180, value: 1000 },
  { minDegree: 121, maxDegree: 150, value: 1100 },
  { minDegree: 91, maxDegree: 120, value: 1200 },
];
/* --------------- Size Of Each Piece  --------------------- */
const size = [10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10];
/* --------------- Background Colors  --------------------- */
var spinColors = [
  "#E74C3C",
  "#7D3C98",
  "#2E86C1",
  "#138D75",
  "#F1C40F",
  "#D35400",
  "#138D75",
  "#F1C40F",
  "#b163da",
  "#E74C3C",
  "#7D3C98",
  "#138D75",
];

labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

我尝试使用此代码（我修改了自己）将项目减少为 10 个项目，并且还找到了我自己的 spinValues 的 minDegree 和 MaxDegree 公式

/* --------------- Minimum And Maximum Angle For A value  --------------------- */
const spinValues = [
  { minDegree: 73, maxDegree: 108, value: 100 },
  { minDegree: 37, maxDegree: 72, value: 200 },
  { minDegree: 0, maxDegree: 36, value: 300 },
  { minDegree: 325, maxDegree: 360, value: 400 },
  { minDegree: 289, maxDegree: 324, value: 500 },
  { minDegree: 253, maxDegree: 288, value: 600 },
  { minDegree: 217, maxDegree: 252, value: 700 },
  { minDegree: 181, maxDegree: 216, value: 800 },
  { minDegree: 145, maxDegree: 180, value: 900 },
  { minDegree: 109, maxDegree: 144, value: 1000 },
];
/* --------------- Size Of Each Piece  --------------------- */
const size = [12, 12, 12, 12, 12, 12, 12, 12, 12, 12];
/* --------------- Background Colors  --------------------- */
var spinColors = [
  "#E74C3C",
  "#7D3C98",
  "#2E86C1",
  "#138D75",
  "#F1C40F",
  "#D35400",
  "#138D75",
  "#F1C40F",
  "#b163da",
  "#E74C3C",
];

labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

但是不知何故出了问题，请参阅我所附的图片

默认12个项目时有效，当箭头显示到标签6时，奖值为600。

我认为脚本中确定A值的最小和最大角度存在一些错误。 我用来获得 10 个物品的公式

360/10

请问，如何确定物品显示的最小和最大角度（度）？ 我想使用 PHP 中的 foreach 函数 来显示具有最小和最大角度的项目（spinValues 的 minDegree 和 MaxDegree），以便我可以轻松地增加或减少项目总数。 谢谢

Answer 1

在 JavaScript 中的图表上下文中，术语“度”通常指与图表上的数据点相关的角度或值。例如，在极坐标图中，您可能指的是角度，而在条形图中，您可能指的是条形的高度或长度。但是，需要注意的是，不同的图表库可能使用不同的术语。

要确定图表中的最小和最大度数或值，您通常需要分析用于生成图表的数据。确切的方法取决于您正在使用的图表类型。以下是一些例子：

1.折线图：

假设您正在使用像 Chart.js 这样的库，您可以找到数据集中的最小值和最大值：

// Assuming you have a line chart
var chartData = {
  labels: ['Label 1', 'Label 2', 'Label 3'],
  datasets: [
    {
      label: 'Dataset 1',
      data: [10, 20, 5],
    },
    // ... other datasets
  ],
};

// Get the minimum and maximum values
var minValue = Math.min(...chartData.datasets[0].data);
var maxValue = Math.max(...chartData.datasets[0].data);

console.log('Min Value:', minValue);
console.log('Max Value:', maxValue);

2.条形图：

对于条形图，您可能需要迭代所有数据集并找到最小值和最大值：

// Assuming you have a bar chart
var chartData = {
  labels: ['Label 1', 'Label 2', 'Label 3'],
  datasets: [
    {
      label: 'Dataset 1',
      data: [10, 20, 5],
    },
    // ... other datasets
  ],
};

// Get the minimum and maximum values
var allData = chartData.datasets.flatMap(dataset => dataset.data);
var minValue = Math.min(...allData);
var maxValue = Math.max(...allData);

console.log('Min Value:', minValue);
console.log('Max Value:', maxValue);

3.极坐标图：

对于极坐标图，您可能要处理角度。在这种情况下，您可以找到最小和最大角度：

// Assuming you have a polar chart
var chartData = {
  labels: ['Label 1', 'Label 2', 'Label 3'],
  datasets: [
    {
      label: 'Dataset 1',
      data: [30, 60, 90], // angles in degrees
    },
    // ... other datasets
  ],
};

// Get the minimum and maximum angles
var minValue = Math.min(...chartData.datasets[0].data);
var maxValue = Math.max(...chartData.datasets[0].data);

console.log('Min Angle:', minValue);
console.log('Max Angle:', maxValue);

确保根据您在项目中使用的特定图表库和图表类型来调整代码。不同的图表库可能有不同的表示和访问数据的方式。