Question

所以我使用高图来制作一些图表，但我正面临一些新的事情：

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

只有2行，这里有6行：

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

修改

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

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

您需要扩展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'
  }]

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

在工具提示（在许多其他行中）高图中重新组合2行

1 个答案: