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

ej83mcc0  于 11个月前  发布在  Chart.js
关注(0)|答案(1)|浏览(221)

我有一个从图表和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个项目,用这个代码(我修改了我自己),也找到了我自己的公式与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]


但它不知何故出错,看到我附上的图片The arrow show to labels 6 but the prize value is 700The arrow show to labels 2 but the prize value is 300
默认12件作品,当箭头指向标签6时,奖品价值为600。
我想在脚本中确定A值的最小和最大Angular 时有一些错误。我用来获得10个项目360/10formula in excel的公式
我想问的是,如何确定项目显示的最小和最大Angular (度)?我想使用PHP中的
foreach函数
来显示具有最小和最大Angular (spinValues的minDegree和MaxDegree)的项目,以便我可以轻松地增加或减少项目的总数。谢谢

xe55xuns

xe55xuns1#

首先你对360/10公式的看法是对的
你需要做的是将spinValues按升序排列,然后像下面这样编辑大小

const size = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1];

字符串
没有必要使大小大于“1”,因为如果所有的数字是相同的,它将被分割成同一块。现在请确保改变你的箭头轮的顶部,而不是在右边

.container img{
    position: absolute;
    width: 4em;
    top: -5%;
    right: 44%;
    transform:rotate(-93deg);
}


现在你将有正确的价值是什么箭头显示。希望这对你有帮助

相关问题