Highcharts是一款純JavaScript編寫的圖表庫，為你的Web網(wǎng)站、Web應(yīng)用程序提供直觀、交互式圖表。當(dāng)前支持折線、曲線、區(qū)域、區(qū)域曲線圖、柱形圖、條形圖、餅圖、散點(diǎn)圖、角度測量圖、區(qū)域排列圖、區(qū)域曲線排列圖、柱形排列圖、極坐標(biāo)圖等幾十種圖表類型。

點(diǎn)擊下載Highcharts最新試用版

Highcharts是一個高度可定制的庫，允許用戶創(chuàng)建幾乎可以想象的任何基于SVG的交互式可視化，甚至包括游戲！

Highcharts SVG渲染器是一種可能有助于實(shí)現(xiàn)Highcharts核心中未包含的自定義元素的基本工具。它可以用來向您的圖表添加可以以任何形狀創(chuàng)建的自定義SVG元素-如果您在使用畫布API之前就感到賓至如歸，那么唯一的限制就是想像力。

SVG元素

可以渲染一些基本元素，可以創(chuàng)建一個圓形，弧形，矩形，文本元素，標(biāo)簽，按鈕，符號或繪制路徑。這次，我們將專注于渲染將用于創(chuàng)建蛇形主體的矩形。

制造一條蛇

在開始渲染之前，我們需要創(chuàng)建一個可以放置渲染元素的層。為此，您可以使用已經(jīng)存在的圖表，但是值得一提的是，可以創(chuàng)建一個獨(dú)立的SVG圖。
因?yàn)槲蚁雱?chuàng)建一個可以與圖表互動的游戲，所以我從一個基本的散點(diǎn)圖開始。

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

現(xiàn)在，可以直接從剛剛創(chuàng)建的圖表訪問渲染器。要使用它并創(chuàng)建第一個矩形，我們可以使用renderer.rect（x，y，width，height）方法。該方法有四個參數(shù)：

1. x –距容器左側(cè)的距離（以px為單位）
2. y –距容器頂部的距離
3. 矩形的寬度
4. 矩形的高度

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

讓它動起來！

在上一段中，我們學(xué)習(xí)了如何渲染一個簡單的矩形，但這只是靜態(tài)的。我們的蛇應(yīng)該更活潑。要喚醒它，我們需要學(xué)習(xí)方法。這將使我們能夠?qū)⒃匾苿右欢ǖ膞和y值。因此，如果我們想將蛇向右移動100px，則應(yīng)使用：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);

到目前為止，我們已經(jīng)學(xué)會了如何制作一條蛇，使他能夠移動，但是他仍然缺乏一項(xiàng)非常重要的技能-吃點(diǎn)。為此，當(dāng)某個點(diǎn)與我們的蛇處于同一位置時，我們需要以某種方式刪除該點(diǎn)。為了簡化操作，我將為所有點(diǎn)設(shè)置相同的值，并為兩個軸設(shè)置最小和最大屬性值。

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

現(xiàn)在我們準(zhǔn)備實(shí)現(xiàn)此功能。我們要做的就是將蛇的像素位置與點(diǎn)進(jìn)行比較。

為了獲得實(shí)際的蛇位置，我們需要在其初始位置添加一個轉(zhuǎn)換值。可以在property 下找到轉(zhuǎn)換值，以獲取初始位置，我們可以使用attr（）方法返回某個屬性的值。snake.translateX

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

查找點(diǎn)的像素坐標(biāo)的方法有多種，但是最簡單的方法是使用軸toPixels（）方法，該方法將返回值在圖表或軸上的像素位置。

const pointPosX = xAxis.toPixels(point.x)

現(xiàn)在，我們要做的就是創(chuàng)建一個簡單的函數(shù)，該函數(shù)將遍歷所有點(diǎn)并刪除其距離小于蛇形大小的距離。要刪除一個點(diǎn)，我們可以使用方法。然后，我們可以在負(fù)責(zé)移動蛇的間隔內(nèi)調(diào)用該函數(shù)。我們的蛇終于學(xué)會了如何吃圖表積分。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();
    }
  })
}

我們的蛇學(xué)到了一些基本能力。當(dāng)然，要創(chuàng)建一個功能齊全的游戲，我們還有很多地方需要改進(jìn)，但是本文介紹了與蛇與Highcharts庫集成有關(guān)的最重要部分。

隨意使用代碼檢查游戲的最終版本。如果您有任何問題或意見，請告訴我，我們將很高興收到您的來信。