Question

我是Highcharts的新手，尤其是Javascript。我想知道如何在y轴上的标签后面添加超链接。到目前为止，我无法在文档和此处找到答案。我有这样的事情：

Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
    title: {
        text: ''
    },
    colors: ['#c83f3f', '#66b257'],    
    fontFamily: 'Merriweather Sans, sans-serif',
        xAxis: {
        categories: ['Test 1', 'Test 2', 'Test 3', 'Test 4', 'Test 5', 'Test 6', 'Test 7', 'Test 8']
    },
    yAxis: {
        min: 0,
        max: 10,
        title: {
            text: ''
        }
    },
    legend: {
        reversed: true
    },
    plotOptions: {
        series: {
            stacking: 'normal'
        }
    },
    series: [{
        name: 'Nicht erfüllte Kriterien',
        data: [5, 3, 4, 7, 2, 6, 4, 5]
    }, {
        name: 'Erfüllte Kriterien',
        data: [5, 7, 6, 3, 8, 4, 6, 5]
    }]
});

现在我想把链接放到“测试2”，“测试2”等标签后面的外部网站上。 - 我该怎么做？

非常感谢！ -Oliver

Answer 1

您可以在anchor<a> categories数组中提供xAxis个标记。指定其中的链接。就像这样：

     categories: ['<a href="http://stackoverflow.com">Test 2',
 '<a href="http://stackoverflow.com/questions">Test 5</a>']

示例代码：我在此示例中提供了测试2和测试5的链接：

Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
    title: {
        text: ''
    },
    colors: ['#c83f3f', '#66b257'],    
    fontFamily: 'Merriweather Sans, sans-serif',
        xAxis: {
        categories: ['Test 1', '<a href="http://stackoverflow.com">Test 2', 'Test 3', 'Test 4', '<a href="http://stackoverflow.com/questions">Test 5</a>', 'Test 6', 'Test 7', 'Test 8']
    },
    yAxis: {
        min: 0,
        max: 10,
        title: {
            text: ''
        }
    },
    legend: {
        reversed: true
    },
    plotOptions: {
        series: {
            stacking: 'normal'
        }
    },
    series: [{
        name: 'Nicht erfüllte Kriterien',
        data: [5, 3, 4, 7, 2, 6, 4, 5]
    }, {
        name: 'Erfüllte Kriterien',
        data: [5, 7, 6, 3, 8, 4, 6, 5]
    }]
});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

链接条形图的Y轴链接

1 个答案: