HighCharts: 在图表的 X 轴上添加超链接

Question

我很喜欢使用HighCharts库在我的PHP网站中显示图表，通过将旧图表迁移到该库中，我对其提供的众多图表选项和函数印象深刻。

然而，我无法为x轴或y轴的值提供超链接以便导航到其他URI。

这里是本例中类别的代码。

xAxis: {
    categories: [
        'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
    ]
},

有没有人能给我指出一个Highcharts的示例或文档，供我参考。

谢谢

编辑：答案

这里是链接类别名称的jsfiddle示例：http://jsfiddle.net/a5Bdt/

- learner

---

这是用于澄清的jsfiddle示例：http://jsfiddle.net/Lc6zx/ 我想将x轴上1月到12月的超链接设置为维基页面。 - learner

相关/重复问题 http://stackoverflow.com/questions/12758465/how-to-handle-mouse-events-on-axis-labels-in-highcharts - Jugal Thakkar

Fiddle非常好用，但如果您想让现在作为链接的类别看起来像站点中的其他链接，请在格式化函数后添加useHTML: true。 - RichP

Answer 1

我已经有一段时间没有在highcharts中工作了，但是我认为你只需要提供一个formatter函数。例如：

xAxis: {
    categories: [
        'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
    ],
    labels: {
        formatter: function () {
            return '<a>' + this.value + '</a>'
        },
        useHTML: true
    }
},

- NT3RP

---

我认为你需要添加http://api.highcharts.com/highcharts#xAxis.labels.useHTML，因为它默认为false。 - craig1231

谢谢大家，你们有试过 jsfiddle 吗？对我来说它没用，不确定我是否漏掉了什么。 - learner

Answer 2

var categoryLinks = {
        'Foo': 'http://www.google.com',
        'Bar': 'http://www.facebook.com',
        'Foobar': 'http://www.stackoverflow.com'
    };
    $('#container').highcharts({
        xAxis: {
            categories: ['Foo', 'Bar', 'Foobar'],

            labels: {
                formatter: function () {
                    return '<a href="' + categoryLinks[this.value] + '">' +
                        this.value + '</a>';
                }
            }
        },
        series: [{
            data: [300, 200, 600]
        }]
    });

- Manik Thakur