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

仅在悬停时显示堆叠列的标签（以及上一列和下一列）

1 个答案: