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

Question

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

我试过了，但无法添加图片。这是一个 jsfiddle link and here is the reference 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）时，在 [=29= 之后渲染图像总是更容易] 正在初始化图表。

像这样推送系列；

// 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.

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

Add custom images in highstock series

charts

highcharts

highstock