Добавить пользовательские изображения в highstock series

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.