javascript - 如何将图像添加到我的 highcharts 图？

Question

我想为下图中的每一列添加不同的图像。我可以添加一张图片，但无法为图中的每一列获取不同的图片。

http://jsfiddle.net/70awj9on/

$(function () {
var chart;
chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'column',
        height: 400,
        showAxes: false,
        backgroundColor: 'transparent'
    },
    credits: {enabled: false},
    title: {text: 'shoes'},
    tooltip: {enabled: true},
    exporting:{enabled: false},
    xAxis: {
        categories: [
            'JAN',
            'FEB',
            'MAR',
            'APR',
            'MAY',
            'JUN',
            'JUL',
            'AUG',
            'SEP',
            'OCT',
            'NOV',
            'DEC'
        ],
        gridLineWidth: 0,
        tickLength: 0,
        tickWidth: 0,
        labels: {
            color: '#FFFFFF',
            style: {
                color: '#000',
                fontSize: '13px',
                fontFamily: 'Verdana, sans-serif'
            }
        },
        lineColor: 'transparent',
        lineWidth: 1
    },

    yAxis: {
        min: 0,
        title: {
            text: ''
        },
        labels: {
            enabled: false
        },
        gridLineWidth: 0,
        lineColor: '#FFF',
        tickColor: '#FFF',
    },
    colors: ['#000','#ACACAC','#FFF', '#000','#ACACAC','#FFF', '#000','#ACACAC','#FFF', '#000','#ACACAC','#FFF'],
    legend: {enabled: false},
    plotOptions: {
        column: {
            pointPadding: 0.0,
            borderWidth: 0
        }
    },
    series: [{

        data: [5000, 6000, 8000, 9000, 9500, 12000, 13000, 11000, 9200, 6000, 5500, 4000],
        dataLabels: {
            enabled: true,
            rotation: -90,
            color: '#AD2F3E',
            align: 'right',
            x: 4,
            y: 10,
            style: {
                fontSize: '13px',
                fontFamily: 'Verdana, sans-serif',
                'font-weight': 'bold',
                //opacity: 0
            }
        }

    }],
    plotOptions: {
        column: {
            colorByPoint: true,
            pointPadding: 0,
            borderWidth: 0,
            pointWidth: 17
        },
        series:{
            states: {
                hover:{
                    enabled: false
                }
            }
        }
    }
}, function(chart) {

    var imgWidth = 30;
    var imgHeight = 30;

    console.log("h = "+chart.options.chart.height);
    $.each(chart.series[0].data, function(i, point) {
        console.log(point);

        var img = chart.renderer.image('http://i.imgur.com/7ml6v37.jpg', point.plotX - (imgWidth/5), chart.options.chart.height - 40 - imgHeight, imgWidth, imgHeight).attr({zIndex: 3}).add();   

        img.animate({
            y: point.plotY - imgHeight
        },{
            duration: 1000
        });

        var labelColor = (i+1) % 3 == 0 ? 'black' : 'white';
        console.log(i + ", "+labelColor+ ", "+(i+1 % 3));

        setTimeout(function() {
            point.dataLabel.css({color: labelColor});
            point.dataLabel.animate({
                opacity: 1
            },{
                duration: 1000
            });
        }, 1000);
    });


});
});

Answer 1

答案就在这个jsfiddle中:

http://jsfiddle.net/gz6L0Ldw/

series: [{
            name: 'Tokyo',
            marker: {
                symbol: 'square'
            },
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, {
                y: 26.5,
                marker: {
                    symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)'
                }
            }, 23.3, 18.3, 13.9, 9.6]

        }

大约 6 个月前我做了这件事。您必须将其注入(inject)数据数组以提供单例样式。