用Highcharts动画制作彩票轮-控件新闻-慧都网

用Highcharts动画制作彩票轮

翻译|使用教程|编辑：杨鹏连|2021-03-10 09:45:09.950|阅读 192 次

概述：在本教程中，我们将向您展示如何使用Highcharts构建彩票轮。由于高度可定制的库功能，这是可能的，您几乎可以创建任何基于SVG的交互式可视化，例如交互式拼图或蛇游戏。

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

点击下载Highcharts最新试用版

在本教程中，我们将向您展示如何使用Highcharts构建彩票轮。由于高度可定制的库功能，这是可能的，您几乎可以创建任何基于SVG的交互式可视化，例如交互式拼图或蛇游戏。
下图显示了一个彩票轮和四个设置选项：

让我们检查代码，并了解如何创建这样的演示。

该代码有四个主要部分：

创建图表
旋转动画
选择获胜者
春季动画
从春季动画中选择获胜者

创建图表

第一步是使用箭头创建轮子。
车轮代码简单明了。这只是一个基本的饼图：

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;
  }
}