在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。