Highcharts：堆积条形图工具提示启用共享并保持显示箭头

Question

当我启用tooltip.shared = true时，箭头将像屏幕截图一样消失。

tooltip: {
  shared: true
},

我想像tooltip.shared = false

一样保留箭头

tooltip: {
  shared: false
},

此处的演示http://jsfiddle.net/puff0211/5sbfztur/

有谁知道要做到这一点？

谢谢！

Answer 1

您可以tooltip.formatter使用某些css来实现几乎所需的行为，但在shared: false时却不完全相同。

＆＃13;

＆＃13;

$(document).ready(function() {
  $('#container').highcharts({
    chart: {
      //type: 'column'
      type: 'bar'
    },
    title: {
      text: 'Stacked column chart'
    },
    xAxis: {
      categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
    },
    yAxis: {
      min: 0,
      title: {
        text: 'Total fruit consumption'
      },
      stackLabels: {
        enabled: true,
        style: {
          fontWeight: 'bold',
          color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
        }
      }
    },
    legend: {
      align: 'right',
      x: -100,
      verticalAlign: 'top',
      y: 20,
      floating: true,
      backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
      borderColor: '#CCC',
      borderWidth: 1,
      shadow: false
    },
    tooltip: {
      shared: true,
      useHTML: true,
      backgroundColor: null,
      borderWidth: 0,
      formatter: function() {
        //console.log(this.points)
        var points = this.points;
        var pointsLength = points.length;
        var tooltipMarkup = pointsLength ? '<div class="callout right" >' + points[0].key + '<br/>' : '';
        var index;
        var y_value;

        for (index = 0; index < pointsLength; index += 1) {
          y_value = (points[index].y);

          tooltipMarkup += '<span style="color:' + points[index].series.color + '">\u25CF</span> ' + points[index].series.name + ': <b>' + y_value + ' </b><br/>';
        }

        return tooltipMarkup + '</div>';

      },
      /*//you can use bellow code to adjust position
      positioner: function(boxWidth, boxHeight, point) {         
        return {x:point.plotX,y:point.plotY};         
    }*/

    },
    plotOptions: {
      series: {
        stacking: 'normal',
        dataLabels: {
          enabled: true,
          color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
        }
      }
    },
    series: [{
      name: 'John',
      data: [5, 3, 4, 7, 2]
    }, {
      name: 'Jane',
      data: [2, 2, 3, 2, 1]
    }, {
      name: 'Joe',
      data: [3, 4, 4, 2, 5]
    }]
  });
});

＆＃13;

div.callout {
  background-color: rgba(247, 247, 247, 0.85);
  background-image: -moz-linear-gradient(top, rgba(247, 247, 247, 0.85), rgba(247, 247, 247, 0.85));
  position: relative;
  color: #000;
  padding: 5px;
  border-radius: 3px;
  box-shadow: 0px 0px 20px #444;
}

.callout::before {
  content: "";
  width: 0px;
  height: 0px;
  border: 0.8em solid transparent;
  position: absolute;
}

.callout.right::before {
  left: -20px;
  top: 35%;
  border-right: 10px solid rgba(247, 247, 247, 0.85);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

＆＃13;

＆＃13;

＆＃13;

Fiddle演示

工具提示格式化程序

 tooltip: {
  shared: true,
  useHTML: true,
  backgroundColor: null,
  borderWidth: 0,
  formatter: function() {
    var points = this.points;
    var pointsLength = points.length;
    var tooltipMarkup = pointsLength ? '<div class="callout right" >' + points[0].key + '<br/>' : '';
    var index;
    var y_value;
    for (index = 0; index < pointsLength; index += 1) {
      y_value = (points[index].y);
      tooltipMarkup += '<span style="color:' + points[index].series.color + '">\u25CF</span> ' + points[index].series.name + ': <b>' + y_value + ' </b><br/>';
    }
    return tooltipMarkup + '</div>';
  },

CSS

div.callout {
  background-color: rgba(247, 247, 247, 0.85);
  background-image: -moz-linear-gradient(top, rgba(247, 247, 247, 0.85), rgba(247, 247, 247, 0.85));
  position: relative;
  color: #000;
  padding: 5px;
  border-radius: 3px;
  box-shadow: 0px 0px 20px #444;
}

.callout::before {
  content: "";
  width: 0px;
  height: 0px;
  border: 0.8em solid transparent;
  position: absolute;
}

.callout.right::before {
  left: -20px;
  top: 35%;
  border-right: 10px solid rgba(247, 247, 247, 0.85);
}

Answer 2

如果通过包装move函数共享工具提示，则可以防止跳过工具提示锚点。有关包装的更多信息可以在这里：https://www.highcharts.com/docs/extending-highcharts/extending-highcharts。看一下下面的例子。

DOCS参考：
https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

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