半岛外围网上直营

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。