彩票走势图

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

点击下载Highcharts最新试用版

Highcharts是一个高度可定制的库，允许用户创建几乎可以想象的任何基于SVG的交互式可视化，甚至包括游戏！

Highcharts SVG渲染器是一种可能有助于实现Highcharts核心中未包含的自定义元素的基本工具。它可以用来向您的图表添加可以以任何形状创建的自定义SVG元素-如果您在使用画布API之前就感到宾至如归，那么唯一的限制就是想像力。

SVG元素

可以渲染一些基本元素，可以创建一个圆形，弧形，矩形，文本元素，标签，按钮，符号或绘制路径。这次，我们将专注于渲染将用于创建蛇形主体的矩形。

制造一条蛇

在开始渲染之前，我们需要创建一个可以放置渲染元素的层。为此，您可以使用已经存在的图表，但是值得一提的是，可以创建一个独立的SVG图。
因为我想创建一个可以与图表互动的游戏，所以我从一个基本的散点图开始。

const chart = Highcharts.chart('container', {
  chart: {
    type: 'scatter'
  },
  series: [{
    data: [4, 3, 5, 6, 2, 3]
  }]
});

现在，可以直接从刚刚创建的图表访问渲染器。要使用它并创建第一个矩形，我们可以使用renderer.rect（x，y，width，height）方法。该方法有四个参数：

1. x –距容器左侧的距离（以px为单位）
2. y –距容器顶部的距离
3. 矩形的宽度
4. 矩形的高度

const snake = chart.renderer.rect(0, 0, 20, 20)
  .attr({
    fill: 'red'
  })
  .add();

让它动起来！

在上一段中，我们学习了如何渲染一个简单的矩形，但这只是静态的。我们的蛇应该更活泼。要唤醒它，我们需要学习方法。这将使我们能够将元素移动一定的x和y值。因此，如果我们想将蛇向右移动100px，则应使用：translate()

snake.translate(100,0);

const snake = chart.renderer.rect(
    chart.plotLeft,
    chart.plotTop,
    20,
    20
  )
  .attr({
    fill: 'red'
  })
  .add();
let x = 0;
setInterval(() = & gt; {
  if (x + 20 & lt; chart.plotWidth) {
    x += 20;
    snake.translate(x, 0);

到目前为止，我们已经学会了如何制作一条蛇，使他能够移动，但是他仍然缺乏一项非常重要的技能-吃点。为此，当某个点与我们的蛇处于同一位置时，我们需要以某种方式删除该点。为了简化操作，我将为所有点设置相同的值，并为两个轴设置最小和最大属性值。

const chart = Highcharts.chart('container', {
  chart: {
    type: 'scatter'
  },
  xAxis: {
    min: 0,
    max: 8
  },
  yAxis: {
    min: 0,
    max: 8
  },
  series: [{
    pointStart: 1,
    data: [8, 8, 8, 8, 8, 8, 8, 8]
  }]
});

现在我们准备实现此功能。我们要做的就是将蛇的像素位置与点进行比较。

为了获得实际的蛇位置，我们需要在其初始位置添加一个转换值。可以在property 下找到转换值，以获取初始位置，我们可以使用attr（）方法返回某个属性的值。snake.translateX

const snakePosX = snake.attr('x') + snake.translateX;

查找点的像素坐标的方法有多种，但是最简单的方法是使用轴toPixels（）方法，该方法将返回值在图表或轴上的像素位置。

const pointPosX = xAxis.toPixels(point.x)

现在，我们要做的就是创建一个简单的函数，该函数将遍历所有点并删除其距离小于蛇形大小的距离。要删除一个点，我们可以使用方法。然后，我们可以在负责移动蛇的间隔内调用该函数。我们的蛇终于学会了如何吃图表积分。coderemove()

function onCollision() {
  const xAxis = chart.xAxis[0],
    points = chart.series[0].points,
    snakePosX = snake.attr('x') + snake.translateX;

  points.forEach(point = & gt; {
    const pointPosX = xAxis.toPixels(point.x);

    if (Math.abs(snakePosX - pointPosX) & lt; 20) {
      point.remove();
    }
  })
}

我们的蛇学到了一些基本能力。当然，要创建一个功能齐全的游戏，我们还有很多地方需要改进，但是本文介绍了与蛇与Highcharts库集成有关的最重要部分。

随意使用代码检查游戏的最终版本。如果您有任何问题或意见，请告诉我，我们将很高兴收到您的来信。