再グループ（他の多くのライン間）ツールチップに2行が

Question

だから、私はいくつかのグラフを作るためにhighchartsを使用していますが、私は新しい何か直面していますhighcharts：

私は私のグラフのn行を持っているが、私が使用してそれらをペアリングしたいですツールチップ（といくつかの情報を表示）。ここではいくつかの例です：

のみ2行とあった

example 1

は、ここでは6行である：もちろん

example 2

、私は同じ色でラインを再編成したいです。 アイデア

EDIT

これは、私は、チャート（データは、すべてのデータが含まれています。数字、&いくつかのテキストをさかのぼり）：構築方法です、私はわからない、怒鳴るコメントで言ったように

function chartOffer(data) 
{ 
    var days = []; 
    var list = []; 
    var colors = ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']; 

    for (var i = data['dates'].length - 1; i >= 0; i--) 
    { 
     days.push(data['dates'][i].days); 
    } 

    for (var i = data['list'].length - 1; i >= 0; i--) 
    { 
     if (data['list'][i].length != 0) 
     { 
      var tooltip_obj = new Object(); 
      tooltip_obj.pointFormat = "{series.name}<br/>Match offres: <b>{point.y:.2f}</b><br/>" 
      var temp_list = []; 
      var temp_liste = []; 

      /* --- start definit l'index corresponant à la date de départ --- */ 
      var temp_1 = data['dates'].length; 
      var temp_2 = data['list'][i].length; 
      var start = temp_1 - temp_2; 

      var temp_object = new Object(); 
      var temp_objecte = new Object(); 

      temp_object.name = data['list'][i][0].enseigne; 
      temp_object.lineWidth = 1; 
      temp_object.color = colors[i % 9]; 
      temp_object.pointStart = start; 

      temp_objecte.name = data['list'][i][0].enseigne+' Macth'; 
      temp_objecte.lineWidth = 1; 
      temp_objecte.color = colors[i % 9]; 
      temp_objecte.pointStart = start; 
      temp_objecte.yAxis = 1; 
      temp_objecte.tooltip = tooltip_obj; 
      temp_objecte.dashStyle = 'Dash'; 

      for (var j = data['list'][i].length - 1; j >= 0; j--) 
      { 
       var temp_object_two  = new Object(); 
       var temp_object_three = new Object(); 

       temp_object_two.shops = (+data['list'][i][j].nb_shop); 
       temp_object_two.y  = (+data['list'][i][j].nb_offers); 
       temp_object_two.match = (+data['list'][i][j].nb_product); 

       temp_object_three.y  = (+((data['list'][i][j].nb_offers_ean/data['list'][i][j].nb_offers)*100)); 

       temp_list.push(temp_object_two); 
       temp_liste.push(temp_object_three); 
      } 

      temp_object.data = temp_list; 
      temp_objecte.data = temp_liste; 
      list.push(temp_object); 
      list.push(temp_objecte); 
     } 
    } 
    var tip = "{series.name}<br/>Nombre de pdv: <b>{point.shops:,.0f}</b><br/><span style='color: {series.color}'>Nombre d'offres: </span><b>{point.y:,.0f}</b><br/>Nombre de produits: <b>{point.match:,.0f}</b>"; 

    var myChart = Highcharts.chart('container', 
    { 
     title: { 
      text: 'Nombre d\'offres' 
     }, 
     yAxis: [{ 
      title: { 
       text: 'Nb offres' 
      } 
     }, { // Secondary yAxis 
      title: { 
       text: 'Match offres' 
      }, 
      lineColor : '#3498db', 
      labels: { 
       format: '{value} %', 
       style :{ 
        color : '#3498db' 
       } 
      }, 
      opposite: true 
     }], 
     xAxis: { 
      categories: days 
     }, 
     legend: { 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'middle' 
     }, 
     tooltip: { 
      useHTML: true, 
      pointFormat: tip, 
      shared: false 
     }, 
     plotOptions: { 
      series: { 
       marker: { 
        radius: 3 
       } 
      } 
     }, 
     series: list 
    }); 
} 

を一部は本当に便利です：/

Answer 1

このような動作をさせるには、ハイチャートを拡張する必要があります。

ヒントポイントのグループに属していないポイントをフィルタリングするツールチップのデータを取得するラップメソッドです。 trueに

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

設定ツールチップのグループと共有オプション：

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' 
    }] 

例：http://jsfiddle.net/o2ac1r3f/