3

我有这个正在处理的图表，基本上是一组 10 行 [系列]，我必须在每个栏的开头动态添加一个自定义图标（图像），我可以添加一个图像，但正在显示所有行上都有相同的新元素，非常感谢您对此的任何帮助。

这是我创建的 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"/>';
                }

            }

希望我能得到一些帮助。

4

3 回答 3

5

见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];
}
于 2012-11-15T02:51:39.987 回答
4

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

 $(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>';
                    },

希望有帮助！

于 2014-02-19T21:59:10.883 回答
2

好吧，你可以先试试这个：

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 转储出的内容，即完整对象。

如果您需要更多差异，则可以在该值上进行分支。

于 2012-11-15T02:51:49.033 回答