乐趣区

关于javascript:用Highcharts动画制作彩票轮

jiezi

[Highcharts] 是一款纯 JavaScript 编写的图表库，为你的 Web 网站、Web 应用程序提供直观、交互式图表。以后反对折线、曲线、区域、区域曲线图、柱形图、条形图、饼图、散点图、角度测量图、区域排列图、区域曲线排列图、柱形排列图、极坐标图等几十种图表类型。

在本教程中，咱们将向您展现如何应用 Highcharts 构建彩票轮。因为高度可定制的库性能，这是可能的，您简直能够创立任何基于 SVG 的交互式可视化，例如交互式拼图或蛇游戏。
下图显示了一个彩票轮和四个设置选项：

让咱们查看代码，并理解如何创立这样的演示。

该代码有四个次要局部：

  1. 创立图表
  2. 旋转动画
  3. 抉择获胜者
  4. 秋季动画
  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;
}

到目前为止，该演示蕴含所有彩票轮组件（请参见上面的演示）：

然而，咱们还没有实现。让咱们玩得开心，增加一些虚构的物理静止????

秋季动画

产生人造物理学静止的最重要变量是力，阻力，以后角度，指标角度，强度和阈值。让咱们将它们全副收集在一个物体物理下：

let physics = {
force: 0,
angleVel: 0,
angle: 0,
prevAngle: 0, // only used to calculate winner
strength: 0.003 + strengthSlider.value / 10000, // tweakable
drag: 0.98 + dragSlider.value / 1000, // tweakable
threshold: 2 + lengthSlider.value / 10, // tweakable
targ: 0,
isActive: false
};

从秋季动画中抉择获胜者

本教程的最初一步是抉择获胜者。随着方向盘左右挪动，咱们会读取每个方向扭转的长期获胜者。如果间断两次抉择获胜者的索引，则必定抉择了获胜者（请参见上面的代码）：

if (physics.prevAngle >= physics.angle && currentWinner < 0) {
currentWinner = findWinner(chart.series[0].data);
foundPossibleWinner = true;
} else if (
physics.prevAngle <= physics.angle &&
foundPossibleWinner
) {
const nextWinner = findWinner(chart.series[0].data);
if (currentWinner == nextWinner) {

chart.setTitle({
  text: 'The winner is' +
    chart.series[0].data[currentWinner].name + '!'
});
foundPossibleWinner = false;
button.disabled = false;

} else {

currentWinner = -1;
foundPossibleWinner = false;

}
}

[APS]) 帮忙晋升企业生产效率，真正实现生产打算可视化出现与管制, 疾速无效响应不同场景的 [生产打算]，进步准时交货能力，进步产能和资源利用率

退出移动版