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

點擊下載Highcharts最新試用版

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

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

創建甘特拼圖的步驟

1. 使用Highcharts Gantt創建X范圍系列

弄清楚您的區塊布局（我從幻燈片拼圖應用程序復制了布局），并將其布局為簡單的甘特圖。

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

請查看下面我的數據片段。分配給每個塊的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設置為true。我們希望塊在游戲板上滑動到任何地方，因此將x和y的最小/最大拖動分別設置為0和6。最后，將groupBy屬性設置為“groupId”。

3.編寫拖動代碼

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

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

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

我的方法是創建幾個數組來跟蹤游戲板的狀態和每個塊的位置。

pointMatrix數組跟蹤游戲板上哪些“單元格”被占用（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]];

數組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數組在xAxis上保存圖表的水平區域。

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的情況下，如果玩家過早釋放方塊，方塊將會停止運行，從而創建一個松散的網格。

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

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設置為事件的x和y位置。我們將使用此x / y信息來確定拖動的方向。

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

局部變量blockGroup包含blockMatrix子數組，該子數組與玩家打算拖動的塊相對應。

blockGroup數組包含塊在游戲板上的位置及其大小。我還找到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”來確定塊的方向。了解方向將使我們能夠限制塊的運動。（垂直塊僅垂直移動；水平塊僅水平移動。）

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

最后一件事是設置全局變量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中查找塊的位置。例如，如果玩家打算將水平塊向右拖動，請檢查所拖動塊右側的單元格。如果該單元格設置為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數組中記錄該塊的新位置，并在blockProps數組中更新該塊的屬性（行，列）。

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

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

4.逃跑

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

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

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

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

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

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

5.清理

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

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

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

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

	
	

		 
	

	

		 
	

	

		 
	


'
}

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

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

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

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

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