Question

我有这个图表图表我正在处理，基本上是一组10行[系列]，我必须在每个栏的开头添加自定义图标（图像），我能够广告图像但是在所有行上显示相同的mew元素，真的很感激任何帮助。

这是我创建的jsFiddle http://jsfiddle.net/KrTbz/。

这是我需要工作的js代码

            labels: {
                color: '#fff',

                x: 5,
                useHTML: true,
                formatter: function () {
                    return '<img class="" src="http://dummyimage.com/60x60/ff6600/ffffff"/>';
                }

            }

希望我能得到一些帮助。

Answer 1

请参阅http://jsfiddle.net/troynt/KrTbz/3/

只需将随机字占位符替换为您想要的任何图像。

formatter: function () {
    return {
        'Awesome': 'blah',
        'Awesome Previous': 'yadda',
        'Good': 'dabba',
        'Good Previous': 'doo',
        'Okay': 'word',
        'Okay Previous':'up',
        'Awful': 'blah',
        'Awfull Previous': 'blah2'
    }[this.value];
}

Answer 2

要为每个标签应用自定义图像，请尝试使用标签为索引的图像数组：

 $(function () {

        var categoryImgs = {
            'Apples': '<img src="http://dummyimage.com/60x60/ff6600/ffffff"><img>&nbsp;',
            'Oranges':'<img src="http://highcharts.com/demo/gfx/sun.png"><img>&nbsp;',
            'Pears':'<img src="http://highcharts.com/demo/gfx/sun.png"><img>&nbsp;',
            'Grapes':'<img src="http://highcharts.com/demo/gfx/sun.png"><img>&nbsp;',
            'Bananas':'<img src="http://highcharts.com/demo/gfx/sun.png"><img>&nbsp;'
        };

        $('#container').highcharts({
            chart: {
                type: 'column'
            },

            title: {
                text: 'Stacked column chart'
            },
            xAxis: {
                categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
                labels: {
                    x: 5,
                    useHTML: true,                        
                    formatter: function () {
                        return '<div class="myToolTip" title="Hello ' 
                       + this.value +'">' +  categoryImgs[this.value] + '</div>';
                    },

希望有所帮助！

Answer 3

嗯，你可以先试试这个：

http://jsfiddle.net/KrTbz/1/

formatter: function () {
                    console.log(this);
                    return '<img class="" ' +
src="http://dummyimage.com/100x30/ff6600/ffffff?text=' + this.value + '" />';
                }

this的值是当前正在绘制的行，this.value具有标签。

如果你在Chrome中运行它并按F12查看控制台，你可以看到什么console.log转出，完整的对象。

如果您需要更多差异，可以分支该值。

使用highcharts.js在每个xAxis类别标签上显示自定义图标图像[html]

3 个答案: