Javascript Highchart类型：X范围两个数据集之间没有空格

使用X-Range，我试图创建一个使用两个数据集的图形。我无法删除x范围的两列之间的空格。

HTML代码

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/xrange.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>

JS代码

    Highcharts.chart('container', {

    chart: {
    type: 'xrange',
    events: {
      render: function() {
        var chart = this,
          point = chart.series[0].points[0],
          imgSize = 22,
          x = point.plotX + chart.plotLeft + point.shapeArgs.width / 2 - imgSize / 2,
          y = point.plotY + chart.plotTop - point.shapeArgs.height - imgSize / 2,
          offsetTop = -5,
          svgElem;

        if (chart.customElemenst && chart.customElemenst.length) {
            chart.customElemenst.forEach(function(elem) {
            elem.destroy();
          });
        }

        chart.customElemenst = [];

        svgElem = chart.renderer.image(
          'images/Info_icon-72a7cf.svg.png', 
          x,
          y + offsetTop,
          imgSize,
          imgSize
        ).add();

        chart.customElemenst.push(svgElem);
      }
    }
  },
  title: {
    text: null
  },
  xAxis: {
    type: 'datetime'
  },
  yAxis: {
    title: {
      text: ''
    },
    categories: ['Machine Status'],
    reversed: true
  },
  legend:true,
  credits:false,
  /* plotOptions: {
    series: {
      borderRadius: 0,

    }
  }, */
   plotOptions: {
    series: {
        borderRadius: 0,
      grouping: false,
      pointPadding: 0.7,
      dataLabels: {
        align: 'center',
        enabled: true,

       // format: "{point.name}"
      }
    }
  },
  tooltip: {
     formatter: function () {
         return '<b>' + this.series.name + ' - ' + this.point.name + '</b><br/>' + Highcharts.dateFormat('%e %B %H:%M', this.point.x) +
             ' - ' + Highcharts.dateFormat('%B %e %H:%M', this.point.x2) + '<br/>';
     }
 },

  series: [{"name":"Active","strokewidth":10,"pointWidth":20,"color":"","data":[{"name":"Program Status","x":1564215451000,"x2":1564215511000,"y":0,"color":"#2cd345"},{"name":"Program Status","x":1564215511000,"x2":1564215571000,"y":0,"color":"#2cd345"},{"name":"Program Status","x":1564215571000,"x2":1564215631000,"y":0,"color":"#2cd345"},{"name":"Program Status","x":1564215751000,"x2":1564215811000,"y":0,"color":"#2cd345"},{"name":"Program Status","x":1564215871000,"x2":1564215931000,"y":0,"color":"#2cd345"},{"name":"Program Status","x":1564215931000,"x2":1564215991000,"y":0,"color":"#2cd345"}]},{"name":"Abort","pointWidth":20,"color":"","data":[{"name":"Program Status2","x":1564214400000,"x2":1564215269000,"y":0,"color":"#ff4040"},{"name":"Program Status2","x":1564215269000,"x2":1564215331000,"y":0,"color":"#ff4040"},{"name":"Program Status2","x":1564215331000,"x2":1564215391000,"y":0,"color":"#ff4040"},{"name":"Program Status2","x":1564215391000,"x2":1564215451000,"y":0,"color":"#ff4040"},{"name":"Program Status2","x":1564215631000,"x2":1564215691000,"y":0,"color":"#ff4040"},{"name":"Program Status2","x":1564215691000,"x2":1564215751000,"y":0,"color":"#ff4040"},{"name":"Program Status2","x":1564215811000,"x2":1564215871000,"y":0,"color":"#ff4040"}]}]
});

Highcharts.chart（'container'{
图表：{
类型：“xrange”，
活动：{
render:function（）{
var图表=此，
点=图表。系列[0]。点[0]，
imgSize=22，
x=point.plotX+chart.plotLeft+point.shapeArgs.width/2-imgSize/2，
y=point.plotY+chart.plotTop-point.shapeArgs.height-imgSize/2，
偏移量=-5，
svgElem；
if（chart.customElemenst&&chart.customElemenst.length）{
图表customElemenst.forEach（功能（elem）{
元素destroy（）；
});
}
chart.customElemenst=[]；
svgElem=chart.renderer.image(
“images/Info_icon-72a7cf.svg.png”，
x,，
y+偏移，
imgSize，
imgSize
).add（）；
图表.客户服务推送（svgElem）；
}
}
},
标题：{
文本：空
},
xAxis：{
键入：“日期时间”
},
亚克斯：{
标题：{
文本：“”
},
类别：[“机器状态”]，
对
},
传说：没错，
学分：假，
/*打印选项：{
系列：{
边界半径：0，
}
}, */
打印选项：{
系列：{
边界半径：0，
分组：false，
点填充：0.7，
数据标签：{
对齐：'居中'，
启用：对，
//格式：“{point.name}”
}
}
},
工具提示：{
格式化程序：函数（）{
返回'+this.series.name+'-'+this.point.name+'
'+Highcharts.dateFormat（'%e%B%H:%M'，this.point.x）+
“-”+Highcharts.dateFormat（“%B%e%H:%M”，this.point.x2）+“
”；
}
},
系列：[{“名称”：“活动”，“笔划宽度”：10，“点宽度”：20，“颜色”：“数据”：[{“名称”：“程序状态”，“x”：1564215451000，“x2”：156215511000，“y”：0，“颜色”：“2cd345”}，{“名称”：“程序状态”，“x”：156215511000，“x2”：1562155571000，“y”：0，“颜色”：“2cd345”}，{“名称”：“程序状态”，“x”：1564255571000，“x2”：1562156331000，“y”；“颜色”：“名称”{“程序状态”，“x”：1564215751000，“x2”：15642511000，“y”：0，“颜色”：“#2cd345”}，{“名称”：“程序状态”，“x”：156425871000，“x2”：156215931000，“y”：0，“颜色”：“#2cd345”}，{“名称”：“程序状态”，“x”：1564215931000，“x2”：1564215991000，“y”：0，“颜色”：“{“名称”：“中止”，“点宽度”：20，“颜色”：“数据”[“程序状态”{“：1564214400000，“x2”：1564215269000，“y”：0，“颜色”：“#ff4040”}，{“名称”：“程序状态2”，“x”：1564215269000，“x2”：156453331000，“y”：0，“颜色”：“#ff4040”}，{“名称”：“程序状态2”，“x”：1564215331000，“x2”：1564215391000，“y”：0，“颜色”：“{“名称”：“#ff4040”}，{“名称”：“程序状态2”，“x”：1564215391000，“颜色”：“{，“x”：1564215631000，“x2”：1564215691000，“y”：0，“颜色”：“#ff4040”}，{“名称”：“程序状态2”，“x”：1564215691000，“x2”：1562157551000，“y”：0，“颜色”：“#ff4040”}，{“名称”：“程序状态2”，“x”：1562158111000，“x2”：156215871000，“y”：0，“颜色”：]
});

我的第二期在下面

还尝试在单个系列中组合两个数据集，但在这种情况下，无法在系列->数据->名称上显示图例。 下面是关于这一点的JSFIDLE。图例应处于活动状态，中止

---

您可以通过css解决这个问题

---

要删除空格，可以将

series.borderWidth=1

和边框颜色设置为与特定系列颜色相同的颜色

代码：

  plotOptions: {
    series: {
      borderRadius: 0,
      borderWidth: 1,
      grouping: false,
      pointPadding: 0,
      groupPadding: 0
    }
  },
  series: [{
    "name": "Active",
    "strokeWidth": 0,
    "pointWidth": 20,
    borderColor: '#2cd345',
    ...
  }]

演示：

  plotOptions: {
    series: {
      borderRadius: 0,
      borderWidth: 1,
      grouping: false,
      pointPadding: 0,
      groupPadding: 0
    }
  },
  series: [{
    "name": "Active",
    "strokeWidth": 0,
    "pointWidth": 20,
    borderColor: '#2cd345',
    ...
  }]

API参考：

  plotOptions: {
    series: {
      borderRadius: 0,
      borderWidth: 1,
      grouping: false,
      pointPadding: 0,
      groupPadding: 0
    }
  },
  series: [{
    "name": "Active",
    "strokeWidth": 0,
    "pointWidth": 20,
    borderColor: '#2cd345',
    ...
  }]

• 
  
  

---

编辑

第二个问题可以通过添加以下代码来解决：

  chart: {
    type: 'xrange',
    events: {
      render: function() {
        var chart = this;

        chart.legend.allItems.forEach(function(item) {
          item.legendSymbol.attr({
            fill: item.options.borderColor
          });
        });
      }
    }
  }

演示：

  plotOptions: {
    series: {
      borderRadius: 0,
      borderWidth: 1,
      grouping: false,
      pointPadding: 0,
      groupPadding: 0
    }
  },
  series: [{
    "name": "Active",
    "strokeWidth": 0,
    "pointWidth": 20,
    borderColor: '#2cd345',
    ...
  }]

---

已通过css修复。谢谢。第二个问题如何？我需要基于系列->数据->名称的图例？对于提供的解决方案，图例与系列颜色不符，我在本期中使用了此图例。更好的方法是将数据分成两个系列，如所附示例所示。