用Highcharts动画制作彩票轮

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

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

但是，我们还没有完成。让我们玩得开心，添加一些虚构的物理运动

标签：动画,chart,图表,彩票,startAngle,Highcharts,360
来源： https://blog.51cto.com/15078157/2655957