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

點擊下載Highcharts最新試用版

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

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

SVG元素

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

制造一條蛇

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

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

現在，可以直接從剛剛創(chuàng)建的圖表訪問渲染器。要使用它并創(chuàng)建第一個矩形，我們可以使用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();

讓它動起來！

在上一段中，我們學習了如何渲染一個簡單的矩形，但這只是靜態(tài)的。我們的蛇應該更活潑。要喚醒它，我們需要學習方法。這將使我們能夠將元素移動一定的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)

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

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

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