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

Question

尝试将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);
});
})

对于每个类别，我都有一个工具提示： cat1：descrption1 cat2：descrption2 cat3：descrption3 cat4：descrption4

当鼠标悬停在＆＃34; cat1＆＃34;，＆＃34; description1＆＃34;需要显示为工具提示。如下所示：

Answer 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＆lt; - ＆gt; description1用于描述的跨度标题。

Answer 2

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

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

<强> DEMO Link

Answer 3

扩展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'
            }
        },           
    }