发布于2023-03-05 21:23 阅读(1206) 评论(0) 点赞(28) 收藏(4)
我正在为我的 Lucky Spin Wheel 使用 ChartJS,我已经使用 Pie Chart 创建轮子,现在我根据要求放置数据标签,并使用以下代码旋转它
rotation: function(ctx) {
const valuesBefore = ctx.dataset.data.slice(0, ctx.dataIndex).reduce((a, b) => a + b, 0);
const sum = ctx.dataset.data.reduce((a, b) => a + b, 0);
const rotation = ((valuesBefore + ctx.dataset.data[ctx.dataIndex] /2) /sum *360);
return rotation < 180 ? rotation-90 : rotation+90;
}
他们如期而至,但是当我用
myChart.options.rotation = myChart.options.rotation + resultValue;
myChart.update()
这里 resultValue 固定为 101,旋转后 datalabels 位置也发生变化,与预期不符,以下是图像
有什么方法可以限制数据表轮换吗?
我也有同样的需求,是这样解决的:
rotation: (context) =>
context.dataIndex * (360 / context.chart.data.labels.length) +
360 / context.chart.data.labels.length / 2 +
270 +
context.chart.options.rotation
通过这种方式,旋转角度被添加到已经固定的基本旋转中,并且即使在图形旋转之后也允许保持相同的文本角度。
以下是基于此站点的“Lucky Spin Wheel”的完整示例:
/* --------------- Spin Wheel --------------------- */
const spinWheel = document.getElementById("spinWheel");
const spinBtn = document.getElementById("spin_btn");
const text = document.getElementById("text");
/* --------------- 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",
];
/* --------------- Chart --------------------- */
/* --------------- Guide : https://chartjs-plugin-datalabels.netlify.app/guide/getting-started.html --------------------- */
let spinChart = new Chart(spinWheel, {
plugins: [ChartDataLabels],
type: "pie",
data: {
labels: ['First Price', 'Second Price', 'third price', 'fourth price', 'fifth price', 'sixth price', 'seventh price', 'eighth price', 'ninth price', 'tenth price', 'eleventh price', 'twelfth price'],
datasets: [
{
backgroundColor: spinColors,
data: size,
},
],
},
options: {
responsive: true,
animation: { duration: 0 },
plugins: {
tooltip: false,
legend: {
display: false,
},
datalabels: {
// Change this option
rotation: (context) =>
context.dataIndex * (360 / context.chart.data.labels.length) +
360 / context.chart.data.labels.length / 2 +
270 +
context.chart.options.rotation,
color: "#ffffff",
formatter: (_, context) => context.chart.data.labels[context.dataIndex],
font: { size: 14 },
},
},
},
});
/* --------------- Display Value Based On The Angle --------------------- */
const generateValue = (angleValue) => {
for (let i of spinValues) {
if (angleValue >= i.minDegree && angleValue <= i.maxDegree) {
text.innerHTML = `<p>Congratulations, You Have Won $${i.value} ! </p>`;
spinBtn.disabled = false;
break;
}
}
};
/* --------------- Spinning Code --------------------- */
let count = 0;
let resultValue = 101;
spinBtn.addEventListener("click", () => {
spinBtn.disabled = true;
text.innerHTML = `<p>Best Of Luck!</p>`;
let randomDegree = Math.floor(Math.random() * (355 - 0 + 1) + 0);
let rotationInterval = window.setInterval(() => {
spinChart.options.rotation = spinChart.options.rotation + resultValue;
spinChart.update();
if (spinChart.options.rotation >= 360) {
count += 1;
resultValue -= 5;
spinChart.options.rotation = 0;
} else if (count > 15 && spinChart.options.rotation == randomDegree) {
generateValue(randomDegree);
clearInterval(rotationInterval);
count = 0;
resultValue = 101;
}
}, 10);
});
/* --------------- End Spin Wheel --------------------- */
/*----------------- GOOGLE FONTS -----------------*/
@import url('https://fonts.googleapis.com/css2?family=PT+Serif&display=swap');
/*----------------- VARIABLES -----------------*/
:root {
/* Colors */
--white_color : rgb(255, 255, 255);
--gold_color: rgb(255, 215, 0);
--green_color: rgb(45, 252, 26);
--body_background: linear-gradient(to right, #141e30, #243b55);
--spin_background: linear-gradient(to right, #fc4a1a, #f7b733);
}
/*----------------- Base -----------------*/
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: 'PT Serif', serif;
}
body {
height: 100vh;
background: var(--body_background);
}
/*----------------- Styling Start -----------------*/
h1 {
position: absolute;
font-size: 4rem;
top: 10%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--gold_color);
}
.container {
width: 90%;
max-width: 34.37rem;
margin-top: 3rem;
max-height: 90vh;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
padding: 3rem;
border-radius: 1rem;
}
.wheel_box {
position: relative;
width: 100%;
height: 100%;
}
#spinWheel {
max-height: inherit;
width: inherit;
transform: rotate(270deg);
}
#spin_btn {
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
height: 26%;
width: 26%;
border-radius: 50%;
cursor: pointer;
border: 0;
background: var(--spin_background);
color: var(--white_color);
text-transform: uppercase;
font-size: 1.8rem;
letter-spacing: 0.1rem;
font-weight: 600;
}
.fa-solid {
position: absolute;
top: -8%;
left: 43.7%;
font-size: 4rem;
color: var(--green_color);
transform: rotate(-225deg);
}
#text {
font-size: 1.5rem;
text-align: center;
margin-top: 1.5rem;
color: var(--gold_color);
font-weight: 500;
}
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Source Code Of Spin Wheel</title>
<!--------------- CSS --------------------->
<link rel="stylesheet" href="style.css">
<!--------------- Font Aewsome --------------------->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<!--------------- Chart JS --------------------->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<!--------------- Chart JS Plugin --------------------->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.1.0/chartjs-plugin-datalabels.min.js"></script>
</head>
<body>
<h1>JACKPOT</h1>
<div class="container">
<div class="wheel_box">
<canvas id="spinWheel"></canvas>
<button id="spin_btn">Spin</button>
<i class="fa-solid fa-location-arrow"></i>
</div>
<div id="text"><p>Wheel Of Fortune</p></div>
</div>
<!--------------- SCRIPT --------------------->
<script src="script.js"></script>
</body>
</html>
作者:黑洞官方问答小能手
链接:http://www.qianduanheidong.com/blog/article/498355/4f55a68ab4728be25ee7/
来源:前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容:(最多支持255个字符)
---无人问津也好,技不如人也罢,你都要试着安静下来,去做自己该做的事,而不是让内心的烦躁、焦虑,坏掉你本来就不多的热情和定力
Copyright © 2018-2021 前端黑洞网 All Rights Reserved 版权所有,并保留所有权利。 京ICP备18063182号-3
投诉与举报,广告合作请联系vgs_info@163.com或QQ3083709327
免责声明:网站文章均由用户上传,仅供读者学习交流使用,禁止用做商业用途。若文章涉及色情,反动,侵权等违法信息,请向我们举报,一经核实我们会立即删除!