开源图表库Highcharts教程：Highcharts的蛇游戏

Highcharts是一个高度可定制的库，允许用户创建几乎可以想象的任何基于SVG的交互式可视化，甚至包括游戏！在本教程中，我们将在较低级别上查看Highcharts库，以将您的图表转换为蛇形游戏。

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

Highcharts最新试用版

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

以前，我们研究过使用Highcharts Gantt 创建交互式拼图。在本教程中，我们将在较低级别上查看Highcharts库，以将您的图表转换为蛇形游戏（参见下文）：

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. 矩形的高度

使用renderer方法将返回具有给定坐标和大小的SVG元素。尽管如此，将它添加到我们的图表前，我们需要应用像某些属性fill，stroke或者使我们的矩形可见。为此，可以使用attr（）方法。在指定了这些属性之后，我们最终可以使用add（）方法将SVG元素添加到图表中。stroke-width

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

让它动起来！

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

snake.translate(100,0);

现在，我们可以利用这些知识告诉我们的蛇不断地移动到正确的大小，直到它无法进一步移动为止（我们不希望他逃跑，对吧。为此，我们可以创建一个简单的时间间隔，每次将蛇移动一个增加的值。然后，我们需要找到一个图表属性，使我们能够定义将蛇保留在图表内的边界。在这种情况下，我们可以使用该属性。此外，我们可以使用其他图表属性- 并更新蛇的初始位置（现在将其绘制在绘图区域之外，我们希望它位于蛇形图的内部）。chart.plotWidthchart.plotLeftchart.plotTop

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正版授权，或了解更多产品信息请点击【咨询在线客服】

标签：