Highcharts：Y 轴标签上的工具提示答案

【问题标题】：Highcharts: Tooltip on Y-Axis LabelsHighcharts：Y 轴标签上的工具提示
【发布时间】：2014-01-03 11:08:49
【问题描述】：

尝试将有关 y 轴标签的描述显示为工具提示。
是否可以在 y 轴标签上显示相应的工具提示？这是Fiddle，我正在尝试将工具提示添加到 y 轴标签代码：

$(function(){
var chart1;
$(document).ready(function(){
var options = {
    colors: ["#3ACB35", "#DE3A15", "#FF9A00", "#00B8F1"],
    chart: {
        renderTo: 'container',
        type: 'bar',
        backgroundColor: 'black',
        borderColor: 'black',
        borderWidth: 0,
        className: 'dark-container',
        plotBackgroundColor: 'black',
        plotBorderColor: '#000000',
        plotBorderWidth: 0
    },
    credits: {
        enabled: false
    },
    title: {
        text: 'Count Per Category',
        style: {
            color: 'white',
            font: 'normal 22px "Segoe UI"'
        },
        align: 'left'
    },
    tooltip: {
        backgroundColor: 'rgba(0, 0, 0, 0.75)',
        style: {
            color: '#F0F0F0'
        }
    },
    categories: {
        enabled: 'true'
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        borderWidth: 0,
        itemStyle: {
            font: '9pt Segoe UI',
            color: 'white'
        },
        itemHoverStyle: {
            color: 'grey'
        }
    },
    xAxis: {
        categories: ['cat1', 'cat2', 'cat3', 'cat4', 'cat5'],
        tickInterval: 1,
        labels: {
            enabled: true,
            style: {
                color: 'white'
        }
    },
        title: {
            enabled: false
        },
        gridLineColor: '#222222'
    },
    yAxis: {
        title:
        {
            enabled: true,
            text: "Document Count",
            style: {
                fontWeight: 'normal',
                color: 'white'
            }
        },
        labels: {
            style: {
                color: 'white'
        }
    },
        gridLineColor: '#222222'
    },
    exporting: {
        enabled: false
    },
    plotOptions: {
        series: {
            stacking: 'normal',
            cursor: 'pointer'
        }
    },
    series: []
};

options.series = [{
        data: [3, 4, 4, 3, 9]
    }];

chart1 = new Highcharts.Chart(options);
});
})

对于每个类别，我都有一个工具提示，例如：类别 1：描述 1 类别 2：描述 2 类别 3：描述 3 cat4: 描述4

当鼠标悬停在“cat1”上时，“description1”需要显示为工具提示。如下所示：

【问题讨论】：

你之前尝试过什么？我们不做你的工作，我们只是帮助你；）你能提供一个 jsfiddle 吗？
你能展示你尝试过的东西吗？提供一段代码来生成示例图，然后人们可以对其进行更改以包含您的要求？
“cat1”的“description1”是什么？现在我看到“Series1：3”所以对于“cat1”的描述是“3”？
您的代码适用于鼠标悬停在条形或线条上，当悬停在轴标签上时我需要工具提示。“description3”是一些文本而不是“3”。

标签： javascript jquery highcharts

【解决方案1】：

使用为标签启用 HTML 的格式化程序：http://jsfiddle.net/W5wag/2/

    xAxis: {
        categories: ['cat1', 'cat2', 'cat3', 'cat4', 'cat5'],
        tickInterval: 1,
        labels: {
            enabled: true,
            formatter: function() {
                return '<span title="My custom title">' + this.value + '</span>';
            },
            useHTML: true,
            style: {
                color: 'white'
            }
        }
    },

当然，您需要在某处存储引用 cat1 description1 以提供带有描述的跨度标题。

【讨论】：

【解决方案2】：

扩展 Paweł Fus 的解决方案我通过使用 ' - ' 分隔类别的值来定义标签和标题文本。然后该值可以被格式化程序拆分为一个数组，以将第一个数组值显示为标签，将第二个数组值显示为标题文本：http://jsfiddle.net/wqpckxL7/

xAxis: {
        categories: ['cat1 - the first and best category', 
                     'cat2 - this category is less popular', 
                     'cat3', 
                     'cat4', 
                     'cat5'],
        tickInterval: 1,
        labels: {
            enabled: true,
            formatter: function() {                    
                // split using -
                var values = this.value.split(" - ");
                // check we have more than 1 value
                if (values.length > 1) {                                                
                    // use first item in the array as the displayed label and the second for the title text
                    return '<span title="' + values[1] + '">' + values[0] + '</span>';                        
                } else {
                    // if only one value then format as normal
                    return this.value;
                }                    
            },
            useHTML: true,
            style: {
                color: 'white'
            }
        },           
    }

【讨论】：

【解决方案3】：

将pointFormat 属性添加到您的tooltip 对象中：

tooltip: {
  .....,
  .....,
  pointFormat: '<b>{point.y}</b>',
}

DEMO Link:

【讨论】：