Question

这样的东西？这个使用text + image作为一个xaxis类别。我的目标是将图像作为一个x轴类别，将文本标签作为另一个类别，就像分组类别一样，除了示例仅显示文本标签作为类别。

       $(function () {

        var categoryImgs = {
            'AIA': '<img src="http://dummyimage.com/60x60/ff6600/ffffff"><img>&nbsp;',
            'AMP':'<img src="http://highcharts.com/demo/gfx/sun.png"><img>&nbsp;',
            'AMP RPP':'<img src="http://highcharts.com/demo/gfx/sun.png"><img>&nbsp;',
            'Asteron Life':'<img src="http://highcharts.com/demo/gfx/sun.png"><img>&nbsp;',
            'Fidelity Life':'<img src="http://highcharts.com/demo/gfx/sun.png"><img>&nbsp;'
        };

        var totals = new Array();
        var stackTotals = new Array();
        var i = 5, j = 0;
        //totals = HighchartsAdapter
        function reverse() {
            totals.reverse();
        }

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

            title: {
                text: 'Premium Summary'
            },
            yAxis: {
                min: 0,
                title: {
                    text: ''
                },
                labels: {
                    formatter: function () {                            
                        return '$' + this.value;
                    }
                },
                stackLabels: {
                    enabled: true,
                    style: {
                        fontWeight: 'bold',
                        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray',                                                        
                    },                                                
                    formatter: function () {
                        totals[i++] = this.total;                           
                        return '';
                    }, 

                }                    
            },  

            xAxis: {
                categories: ['AIA', 'AMP', 'AMP RPP', 'Asteron Life', 'Fidelity Life'],
                labels: {
                    x: 5,
                    useHTML: true,

                    formatter: function () {                           

                        var n = totals.shift();
                        return '<div class="stacktotal">$' + n +  '</div><div id="div1" class="myToolTip' + this.value +'" title="Hello ' + this.value + '">' + categoryImgs[this.value] + '</div>';

                    },
                    events: {
                        mouseover: function () {
                            var elm = this.children.div1.className;

                            switch (elm) {
                                case "myToolTipAIA":
                                    $('#hoverboard').html('<img name="testimg" src="http://highcharts.com/demo/gfx/sun.png"><p>AIA</p>');
                                    break;
                                case "myToolTipAMP":
                                    $('#hoverboard').html('AMP');
                                    break;
                                case "myToolTipAMP RPP":
                                    $('#hoverboard').html('<img name="testimg" src="http://highcharts.com/demo/gfx/sun.png"><p>AMP RPP </p>');
                                    break;
                                case "myToolTipFidelity Life":
                                    $('#hoverboard').html('Fidelity Life');
                                    break;
                                case "myToolTipAsteron Life":
                                    $('#hoverboard').html('Asteron Life');
                                    break;
                            }                                
                        },
                        mouseout: function () {
                            $('#hoverboard').html('');
                        }                            
                    },
                }                    
            },

            linkedTo: 0,
            categories: ['AIA', 'AMP', 'AMP RPP', 'Asteron Life', 'Fidelity Life'],

            legend: {
                align: 'right',
                x: -70,
                verticalAlign: 'top',
                y: 20,
                floating: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
                borderColor: '#CCC',
                borderWidth: 1,
                shadow: false
            },
            tooltip: {
                formatter: function () {
                    return '<b>' + this.x + '</b><br/>' +
                        this.series.name + ': ' + this.y + '<br/>' +
                        'Total: ' + this.point.stackTotal;
                }
            },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: true,
                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                        style: {
                            textShadow: '0 0 3px black, 0 0 3px black'
                        },
                        format: '${y}'
                    }
                }

            },

            series: [{
                name: 'Policy Fee',
                y:'$' + this.value,
                data: [200.12, 290, 45.78, 71, 120]                    
            }, {
                name: 'WOP',
                data: [150, 210.23, 150, 200, 100]
            }, {
                name: 'Income Protection',
                data: [89, 400, 258.13, 212, 152]
            }, {
                name: 'Life Cover',
                data: [150, 210.23, 150, 200, 100]
            } ]

        });           

    });

Answer 1

现在看来不支持分组类别插件中标签的格式化程序。

您可以通过编辑来源来实现这一目标：http://jsfiddle.net/cFu8z/75/

只需注释掉#376行＆amp; #377：

如何使用文本和图像作为x轴类别实现分组类别插件？在高图？

1 个答案: