用Highcharts动画制作彩票轮
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了用Highcharts动画制作彩票轮,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2496字,纯文字阅读大概需要4分钟。
内容图文
Highcharts是一款纯JavaScript编写的图表库,为你的Web网站、Web应用程序提供直观、交互式图表。当前支持折线、曲线、区域、区域曲线图、柱形图、条形图、饼图、散点图、角度测量图、区域排列图、区域曲线排列图、柱形排列图、极坐标图等几十种图表类型。
在本教程中,我们将向您展示如何使用Highcharts构建彩票轮。由于高度可定制的库功能,这是可能的,您几乎可以创建任何基于SVG的交互式可视化,例如交互式拼图或蛇游戏。
下图显示了一个彩票轮和四个设置选项:
让我们检查代码,并了解如何创建这样的演示。
该代码有5个主要部分:
- 创建图表
- 旋转动画
- 选择获胜者
- 春季动画
- 从春季动画中选择获胜者
创建图表
第一步是使用箭头创建轮子。
车轮代码简单明了。这只是一个基本的饼图:chart = Highcharts.chart('container', { chart: { animation: false, marginTop: 100, events: { ... }, title: { text: 'Chance wheel' }, series: [{ type: 'pie', size: '100%', dataLabels: { distance: -20 }, data: [ ['Pudding', 1], ['Cake', 1], ['Salad', 1], ['Potato', 1], ['Bread', 1] ], startAngle: 360 * Math.random() }] });
使用Highcharts时未提供开箱即用的箭头,因此您必须从头开始构建它。由于使用了renderer方法,您可以轻松地将任何自定义路径添加到Highcharts代码。
triangle = chart.renderer.path([ ['M', chart.chartWidth / 2 - 10, chart.plotTop - 5], ['L', chart.chartWidth / 2 + 10, chart.plotTop - 5], ['L', chart.chartWidth / 2, chart.plotTop + 10], ['Z'] ]) .attr({ fill: 'black' }) .add();
完成此部分后,就该移动到动画部分了。
旋转动画
对于旋转动画,有两个主要部分:
- 事件处理程序
- 图表更新
主要事件来自单击“旋转”按钮,这将触发动画。动画具有更新图表方法,可根据新的处理后的角度渲染图表。在setInterval函数中,每次迭代都会调用update chart方法,这就是旋转效果的原因:
button.addEventListener('click', e => {....
// Create the arrow at the top.
t = setInterval(() => { // Animation loop
if (!physics.isActive) {
startAngle += diff;
if (startAngle > 360) {
startAngle -= 360;
}
diff = 0.98;
chart.series[0].update({
startAngle
});
借助此巧妙公式中的diff变量,车轮每次旋转后速度都会降低。现在,车轮能够旋转并停止。让我们看看如何选择一个赢家。diff = 0.98;选择获胜者
轮子停止运动后,findWinner如果箭头位置在切片起始角度和阈值之内,则以下方法将遍历数据集或切片并进行处理winThreshold。如果存在匹配项,则findWinner返回切片的索引以获取标签并显示获胜者。
const findWinner = (data) => {
const sliceSize = 360 / data.length;
const winThreshold = 360 - sliceSize;
let sliceBeginning;
for (let i in data) {
sliceBeginning = radToDeg(data[i].shapeArgs.start) + 90;
if (sliceBeginning > 360) {
...
}
}
return -1;
}
到目前为止,该演示包含所有彩票轮组件(请参见下面的演示):
但是,我们还没有完成。让我们玩得开心,添加一些虚构的物理运动
内容总结
以上是互联网集市为您收集整理的用Highcharts动画制作彩票轮全部内容,希望文章能够帮你解决用Highcharts动画制作彩票轮所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。