如何將圖像添加到我的高層圖中？

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個月前做了這個確切的事情。你必須注入到你的數據數組中，以便提供單體樣式。