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

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

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

規(guī)則很簡(jiǎn)單。垂直塊垂直移動(dòng)。水平塊水平移動(dòng)。當(dāng)您釋放紅色方塊時(shí)，您會(huì)贏。

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

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

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

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

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

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.使塊可拖動(dòng)

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

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

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

3.編寫拖動(dòng)代碼

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

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

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

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

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跟蹤每個(gè)塊的單獨(dú)位置，以及塊的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]
];

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

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事件，因?yàn)樗鼤?huì)干擾塊的放置。當(dāng)用戶滑動(dòng)一個(gè)塊時(shí)，我們希望它可以捕捉到下一個(gè)空閑單元格。在啟用drop的情況下，如果玩家過(guò)早釋放方塊，方塊將會(huì)停止運(yùn)行，從而創(chuàng)建一個(gè)松散的網(wǎng)格。

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

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信息來(lái)確定拖動(dòng)的方向。

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

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

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

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

通過(guò)在塊的名稱中搜索“ h”來(lái)確定塊的方向。了解方向?qū)⑹刮覀?能夠限制塊的運(yùn)動(dòng)。（垂直塊僅垂直移動(dòng)；水平塊僅水平移動(dòng)。）

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

接下來(lái)是拖動(dòng)功能。由于我們存儲(chǔ)了dragStart事件的x / y位置，因此我們可以將它們與drag事件的x / y位置進(jìn)行比較。例如，如果x值較大，則拖動(dòng)方向是正確的。

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

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

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上，為每個(gè)“區(qū)域”設(shè)置繪圖帶。將最后一個(gè)區(qū)域的plotBand設(shè)為白色。

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

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

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

當(dāng)紅色方塊到達(dá)游戲板上的某個(gè)x位置時(shí)，它會(huì)像小鳥(niǎo)一樣自由飛行。

5.清理

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

我們不返回?cái)?shù)據(jù)標(biāo)簽中的點(diǎn)名，而是添加箭頭來(lái)幫助玩家理解方塊移動(dòng)的限制。

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

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

	
	

		 
	

	

		 
	

	

		 
	


'
}

 垂直塊具有向左/向右箭頭，而沒(méi)有向上/向下箭頭。為了解決這個(gè)問(wèn)題，我們?cè)诖怪眽K的點(diǎn)級(jí)別設(shè)置數(shù)據(jù)標(biāo)簽。“ a”塊獲得向上箭頭，“ c”塊獲得向下箭頭。

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

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

添加說(shuō)明性標(biāo)題，并將軸的gridLine和tickColor更改為“透明”。

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