Javascript 在工具提示（以及许多其他行）图表中重新组合2行

因此，我使用highcharts制作了一些图表，但我面临一些新的问题：

我的图形中有n条线，我想使用工具提示将它们配对（并显示一些信息）。以下是一些例子：

只有2行，这里有6行：

当然，我想用相同的颜色重新组合线条。 有什么想法吗

编辑

这就是我构建图表的方式（数据包含所有数据：数字、日期和一些文本）：

功能图表提供（数据）
{
风险值天数=[]；
var列表=[]；
变量颜色=['#058DC7'、'#50B432'、'#ED561B'、'#DDDF00'、'#24CBE5'、'#64E572'、'#FF9655'、'#FFF263'、'#6AF9C4']；
对于（变量i=data['dates']。长度-1；i>=0；i--）
{
推送（数据['dates'][i].days）；
}
对于（变量i=data['list']。长度-1；i>=0；i--）
{
if（数据['list'][i].length！=0）
{
var tooltip_obj=新对象（）；
工具提示_obj.pointFormat=“{series.name}
匹配项：{point.y:.2f}
”
var temp_list=[]；
var temp_liste=[]；
/*---开始定义部分日期对应的索引--*/
var temp_1=数据['dates']长度；
var temp_2=数据['list'][i]。长度；
var启动=温度1-温度2；
var temp_object=新对象（）；
var temp_objecte=新对象（）；
temp_object.name=data['list'][i][0]；
temp_object.lineWidth=1；
temp_object.color=颜色[i%9]；
temp_object.pointStart=开始；
temp_objecte.name=data['list'][i][0].EnSigne+'Macth'；
temp_objecte.lineWidth=1；
temp_objecte.color=颜色[i%9]；
temp_objecte.pointStart=start；
temp_objecte.yAxis=1；
temp_objecte.tooltip=tooltip_obj；
temp_objecte.dashStyle='Dash'；
对于（var j=data['list'][i]。长度-1；j>=0；j--）
{
var temp_object_two=新对象（）；
var temp_object_three=新对象（）；
temp_object_two.shop=（+data['list'][i][j].nb_shop）；
temp_object_two.y=（+data['list'][i][j].nb_提供）；
temp_object_two.match=（+data['list'][i][j].nb_product）；
temp_object_three.y=（+（（数据['list'][i][j].nb_提供数据['list'][i][j].nb_提供）*100））；
临时列表推送（临时对象二）；
临时列表推送（临时对象三）；
}
temp_object.data=temp_列表；
temp_objecte.data=temp_liste；
list.push（临时对象）；
列表推送（临时对象）；
}
}
var tip=“{series.name}
产品名称：{point.shops:，.0f}
产品名称：{point.y:，.0f}
产品名称：{point.match:，.0f}”；
var myChart=Highcharts.chart（'容器'，
{
标题：{
文本：“名称为'offres'
},
亚克斯：[{
标题：{
正文：“Nb offres”
}
}，{//次雅克西
标题：{
文本：“匹配文件”
},
线条颜色：“#3498db”，
标签：{
格式：“{value}%”，
风格：{
颜色：“#3498db”
}
},
相反：对
}],
xAxis：{
类别：天
},
图例：{
布局：“垂直”，
对齐：“右”，
垂直排列：“中间”
},
工具提示：{
是的，
pointFormat:tip，
共享：false
},
打印选项：{
系列：{
标记：{
半径：3
}
}
},
系列：列表
});
}

---

正如在下面的评论中所说，我不知道什么部分是真正有用的：//

您需要扩展Highcharts来实现这种行为

Wrap方法，用于获取工具提示的数据-它过滤不属于悬停点组的点

Highcharts.wrap(Highcharts.Pointer.prototype, 'getHoverData', function(p, hoverPoint) {
  const hoverData = p.apply(this, Array.prototype.slice.call(arguments, 1))

  if (this.chart.tooltip.options.grouped) {
    hoverData.hoverPoints = hoverData.hoverPoints.filter(point => point.series.options.group === hoverData.hoverPoint.series.options.group)
  }

  return hoverData
})

将工具提示的组和共享选项设置为true：

tooltip: {
  grouped: true,
  shared: true,
},

使用组选项对系列进行分组：

  series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    colorIndex: 0,
    group: 's1'
  }, {
    data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5],
    colorIndex: 1,
    group: 's2'
  }, {
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4].reverse(),
    colorIndex: 0,
    dashStyle: 'dash',
    group: 's1'
  }, {
    data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5].reverse(),
    colorIndex: 1,
    dashStyle: 'dash',
    group: 's2'
  }]

---

示例：

您能解释一下重新排列这些行是什么意思吗？如果您共享您使用的代码或设置一个实例，这会很有帮助。@morganfree，这就是我想要实现的：我正在使用highchart中的一些bug来向您展示这一点，否则它实际上是这样工作的：。在分享我的代码时，我很乐意，但我不知道什么有用，我为我的系列创建了对象。非常感谢^^，我花了很多时间在文档上，找不到答案。

  series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    colorIndex: 0,
    group: 's1'
  }, {
    data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5],
    colorIndex: 1,
    group: 's2'
  }, {
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4].reverse(),
    colorIndex: 0,
    dashStyle: 'dash',
    group: 's1'
  }, {
    data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5].reverse(),
    colorIndex: 1,
    dashStyle: 'dash',
    group: 's2'
  }]