javascript - 仅在悬停时显示堆积列的标签(以及上一列和下一列)

Question

所以基本上我需要在悬停时显示堆积列的标签，但我还需要显示我悬停的列的前一列和后一列的标签。

总而言之，如果我有 A、B、C、D 和 E(每个都有 3 个堆叠列)，并且我将鼠标悬停在 C 上，我应该能够看到 B、C 和 D 的标签(对于所有 3 个堆叠列)列)(以及仅适用于 C 的工具提示，但这是默认的，因此不需要帮助)。

知道如何实现这一点吗？

这是通用代码:

Highcharts.chart('container', {
chart: {
    type: 'column'
},
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: -30,
    verticalAlign: 'top',
    y: 25,
    floating: true,
    backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
    borderColor: '#CCC',
    borderWidth: 1,
    shadow: false
},
tooltip: {
    headerFormat: '<b>{point.x}</b><br/>',
    pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
    column: {
        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]
}]
});

这是一个jfiddle通用堆叠列设置正常工作。

Answer 1

您可以使用CSS和Highcharts事件来隐藏/显示标签，演示:http://jsfiddle.net/2549acmt/

默认CSS:

.highcharts-stack-labels text {
  visibility: hidden;
}

和 JS 事件:

function showLabels() {
  var index = this.x,
      labels = document.querySelectorAll(".highcharts-stack-labels text");
  // previous
  if (index > 0) {
    labels[index - 1].style.visibility = 'visible';
  }
  // current
  labels[index].style.visibility = 'visible';
  // next
  if (labels[index + 1]) {
    labels[index + 1].style.visibility = 'visible';
  }
}
function hideLabels() {
  var index = this.x,
      labels = document.querySelectorAll(".highcharts-stack-labels text");
  if (index > 0) {
    labels[index - 1].style.visibility = 'hidden';
  }
  labels[index].style.visibility = 'hidden';
  if (labels[index + 1]) {
    labels[index + 1].style.visibility = 'hidden';
  }
}

附加事件:

plotOptions: {
    column: {
        stacking: 'normal',
        dataLabels: {
            enabled: true,
            color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
        },
        point: {
            events: {
                mouseOver: showLabels,
                mouseOut: hideLabels
            }
        }
    }
},