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

點擊下載Highcharts最新試用版

彎曲是電子極客修改東西（通常是平凡的東西）并將其彎曲以適應(yīng)新的目的。一個非常基本的例子是，打開一個紅色的大釘鈕，把標準的“很簡單”的聲音換成“松鼠!”，就Highcharts甘特圖而言，彎曲意味著使用庫的核心圖表制作功能來制作甘特圖以外的東西，例如滑動拼圖。

規(guī)則很簡單。垂直塊垂直移動。水平塊水平移動。當您釋放紅色方塊時，您會贏。

創(chuàng)建甘特拼圖的步驟

1. 使用Highcharts Gantt創(chuàng)建X范圍系列

弄清楚您的區(qū)塊布局（我從幻燈片拼圖應(yīng)用程序復(fù)制了布局），并將其布局為簡單的甘特圖。

我為垂直和水平塊分配了不同的顏色。紅色塊是需要釋放的塊。我將軸設(shè)置為線性軸（而不是默認的Treegrid。）這是我最初的甘特圖。

請查看下面我的數(shù)據(jù)片段。分配給每個塊的groupId(“hBlock1”、“vBlock1”)確保分組的垂直塊一起滑動。例如，垂直的vBlocks 1a/1b/1c有一個“vBlock1”的groupId，因此無論玩家與哪個塊交互，這些塊都會拖在一起。

data: [
    {   
        name:'hBlock1a',
        groupId:'hBlock1',
        color:'#A43677',
        x: 0,
        x2: 3,
        y: 0,
    }, {
        name: 'vBlock1a',
        groupId:'vBlock1',
        color:'#f15c80',
        x: 3,
        x2: 4,
        y: 0,
    },{
        name: 'vBlock1b',
        groupId:'vBlock1',
        color:'#f15c80',
        x: 3,
        x2: 4,
        y: 1,
    }, {
        name: 'vBlock1c',
        groupId:'vBlock1',
        color:'#f15c80',
        x: 3,
        x2: 4,
        y: 2,
    }]
}]

2.使塊可拖動

在xRange系列的plotOptions中，添加dragDrop配置：

dragDrop: {
    draggableX: true,
    draggableY: true,
    dragMinY: 0,
    dragMaxY: 6,
    dragMinX: 0,
    dragMaxX: 6,
    liveRedraw: false,
    groupBy: 'groupId' 
}

在系列層面，將draggableX和draggableY設(shè)置為true。我們希望塊在游戲板上滑動到任何地方，因此將x和y的最小/最大拖動分別設(shè)置為0和6。最后，將groupBy屬性設(shè)置為“groupId”。

3.編寫拖動代碼

為了使塊滑動，我們將使用dragStart，拖放功能。在dragDrop選項下，添加點并設(shè)置以下事件：

point: {
      events: {
        dragStart: function (e) {},
        drag: function (e) {},
        drop: function (e) {}
      }
}

在對函數(shù)進行編碼之前，我們先設(shè)置一些全局變量，用于存儲塊的位置和移動。

我的方法是創(chuàng)建幾個數(shù)組來跟蹤游戲板的狀態(tài)和每個塊的位置。

pointMatrix數(shù)組跟蹤游戲板上哪些“單元格”被占用（1），哪些單元格空閑（0）。

let pointMatrix = [
[1,1,1,1,0,0],
[1,1,1,1,1,1],
[1,1,1,1,0,1],
[1,0,1,1,1,1],
[0,0,1,0,1,1],
[1,1,1,0,1,0]];

數(shù)組blockProps跟蹤每個塊的單獨位置，以及塊的groupId，起始行，起始列以及寬度或高度。

var blockProps = [
    ['hBlock1',0,0,3],
    ['hBlock2',1,4,2],
    ['hBlock3',3,3,2],
    ['hBlock4',1,1,2],
    ['hBlock5',2,1,2],
    ['hBlock6',5,0,3],
    ['vBlock2',1,0,3],
    ['vBlock1',0,3,3],
    ['vBlock4',2,5,3],
    ['vBlock5',4,4,2],
    ['vBlock3',3,2,2]];

zones數(shù)組在xAxis上保存圖表的水平區(qū)域。

let zones = [
    [0,1],
    [1,2],
    [2,3],
    [3,4],
    [4,5],
    [5,6]
];

跟隨的全局變量跟蹤塊的位置，拖動方向以及其他一些稍后會起作用的東西。

var yStart =0;
var xStart =0;
var seriesIndex=0;
var seriesGroup='';
var orientation ='';
var startRow=0; 
var startCol=0; 
var size=0;
var seriesData=[];
var blocksToMove = [];

The first point-event function to set up is the easiest:

drop: function () {
      return false;
}

我們禁用drop事件，因為它會干擾塊的放置。當用戶滑動一個塊時，我們希望它可以捕捉到下一個空閑單元格。在啟用drop的情況下，如果玩家過早釋放方塊，方塊將會停止運行，從而創(chuàng)建一個松散的網(wǎng)格。

接下來，我們將設(shè)置dragStart。在此功能中，我們收集有關(guān)拖動目標（即塊）和用戶打算拖動的方向（上/下/左/右）的信息。

dragStart: function (e) {
     yStart=e.chartY;
     xStart = e.chartX;
     seriesGroup = this.groupId;
     seriesName = this.name;
     seriesIndex = this.index;
     seriesData=this.series.chart.series[0].data;

將yStart和xStart設(shè)置為事件的x和y位置。我們將使用此x / y信息來確定拖動的方向。

變量seriesGroup，seriesName，seriesIndex和seriesData完全存儲它們的名稱，并使其更易于使用統(tǒng)計圖對象。

局部變量blockGroup包含blockMatrix子數(shù)組，該子數(shù)組與玩家打算拖動的塊相對應(yīng)。

blockGroup數(shù)組包含塊在游戲板上的位置及其大小。我還找到blockGroup的索引，并將其存儲在blocksIndex中。我們將使用此信息來確定是否可以移動塊。

blockGroup = blockMatrix.find(function(element){
             if(element[0]==seriesGroup){
                 return element;
              }});
blocksIndex = blockMatrix.findIndex(function(element){
       if(element[0]==seriesGroup){
              return element
       }});

通過在塊的名稱中搜索“ h”來確定塊的方向。了解方向?qū)⑹刮覀?能夠限制塊的運動。（垂直塊僅垂直移動；水平塊僅水平移動。）

if(seriesName.indexOf('h')!= -1){
  orientation='horizontal';
}else{
 orientation='vertical';
}

最后一件事是設(shè)置全局變量startRow，startCol和size，以便我們可以在游戲板上查找該塊的位置，并檢查右/左/上方/下方的空間是否阻塞了該塊的路徑。

    startRow = blockGroup[1]; //row 
      startCol = blockGroup[2]; //column 
      size = blockGroup[3]; //length or height
      seriesData = this.series.chart.series[0].data;
}

接下來是拖動功能。由于我們存儲了dragStart事件的x / y位置，因此我們可以將它們與drag事件的x / y位置進行比較。例如，如果x值較大，則拖動方向是正確的。

但是在移動塊之前，我們必須找出它是否可以移動。這是我的方法。

在pointMatrix中查找塊的位置。例如，如果玩家打算將水平塊向右拖動，請檢查所拖動塊右側(cè)的單元格。如果該單元格設(shè)置為0，則該塊可以向右移動一個空格。

if(pointMatrix[startRow][startCol+size] == 0){
    seriesData[seriesIndex].update({x:zones[startCol+1][0],x2:zones[startCol+size][1],y:newerY});
    pointMatrix[startRow][startCol+size]=1;
    pointMatrix[startRow][startCol]=0;
    blockProps[blocksIndex][2]=startCol + 1;
}

最后，在pointMatrix數(shù)組中記錄該塊的新位置，并在blockProps數(shù)組中更新該塊的屬性（行，列）。

pointMatrix[startRow][startCol+size]=1;
pointMatrix[startRow][startCol]=0;
blockMatrix[blocksIndex][2]=startCol + 1;

垂直塊遵循相同的思想，除了我們更新y值

4.逃跑

我們需要退出紅色方塊。我在x和y軸上使用plotBands完成了此任務(wù)。

在xAxis上，為每個“區(qū)域”設(shè)置繪圖帶。將最后一個區(qū)域的plotBand設(shè)為白色。

在y軸上，設(shè)置兩個繪圖帶以掩蓋x軸上的白色繪圖帶。

然后，在將塊向右移動的代碼部分中，添加以下代碼。

if(seriesGroup == 'hBlock5' &&seriesData[seriesIndex].x2 > 5){
 seriesData[seriesIndex].update({x:6,x2:7,y:newerY});
}

當紅色方塊到達游戲板上的某個x位置時，它會像小鳥一樣自由飛行。

5.清理

讓我們清理一些圖表的東西。

我們不返回數(shù)據(jù)標簽中的點名，而是添加箭頭來幫助玩家理解方塊移動的限制。

在dataLabel格式化程序函數(shù)中，檢索每個塊的寬度，并使箭頭的容器稍小于塊，以使箭頭不會在邊緣溢出。

formatter:function(){
  pointWidth = Math.round(this.point.shapeArgs.width);
  return '

	
	

		 
	

	

		 
	

	

		 
	


'
}

 垂直塊具有向左/向右箭頭，而沒有向上/向下箭頭。為了解決這個問題，我們在垂直塊的點級別設(shè)置數(shù)據(jù)標簽。“ a”塊獲得向上箭頭，“ c”塊獲得向下箭頭。

dataLabels: {
  x:-5,
  formatter:function(){
  return ''
}

給紅色方塊一個唯一的標簽。我標記了我的“free me”，并省略了箭頭以使其更加鮮明。

添加說明性標題，并將軸的gridLine和tickColor更改為“透明”。

拼圖布局在左右兩側(cè)都局促不整，并且看不到出口。要解決此問題，請將xAxis的最小值設(shè)置為-0.2，將最大值設(shè)置為6.2。然后，將第一個xAxis plotBand的“ from”值更改為新的min，最后一個plotBand的“ to”值更改為6.2。