在highstock系列中添加自定义图像

Question

有谁知道如何在highstock中添加自定义图像？

我已经尝试过，但无法添加图像。这是一个jsfiddle link，这里是参考link。

JavaScript代码

$(function() { 
    $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function (data) { 

     var year = new Date(data[data.length - 1][0]).getFullYear(); // Get year of last data point 

     // Create the chart 
     $('#container').highcharts('StockChart', { 


      rangeSelector: { 
       selected: 1 
      }, 

      title: { 
       text: 'USD to EUR exchange rate' 
      }, 

      yAxis: { 
       title: { 
        text: 'Exchange rate' 
       } 
      }, 

      series: [{ 
       name: 'USD to EUR', 
       data: data, 
       id: 'dataseries', 
       tooltip: { 
        valueDecimals: 4 
       } 
      }, { 
       type: 'flags', 
       data: [{ 
        x: Date.UTC(year, 4, 28), 
       }], 
       onSeries: 'dataseries', 
       // Here I used the custom image 
       shape: 'url(https://www.highcharts.com/samples/graphics/snow.png)', 
       //shape: 'circlepin', 
      }] 
     }); 
    }); 
}); 

自定义图像是工作的罚款与highcharts。如果有任何与此有关的例子，请让我知道。 感谢

Answer 1

当您正在使用基于SVG制图解决方案（如HighCharts）工作，这是初始化图表后总是容易渲染图像。

推这样的系列;

// Add flags. 
series.push({ 
    "type": "flags", 
    "onSeries": "dataseries", 
    "shadow": false, 
    "width": 32, 
    "shape": "url(http://www.highcharts.com/demo/gfx/sun.png)", 
    "data": [{ 
     "x": Date.UTC(year, 4, 28) 
    }], 
}); 

并确保使用最新版本的HighStock.js;

<script src="http://github.highcharts.com/master/highstock.js"></script> 

这将是结果;

工作例如：jsFiddle。