Question

是否可以在图表中添加自定义徽标/图像？

我试图修改credits标签，但没有运气。

$('#container').highcharts({

    credits: {
        text: 'remisture.no',
        href: 'http://remisture.no',
        position: {
            align: 'right',
            x: -75,
            verticalAlign: 'top',
            y: 25
        },
        style: {
            color: 'red',
            backgroundImage: 'url(https://upload.wikimedia.org/wikipedia/en/thumb/3/3a/Burger_King_Logo.svg/1024px-Burger_King_Logo.svg.png)'
        }
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});

演示：http://jsfiddle.net/remisture/738bnv0b/

知道如何处理这个问题吗？

Answer 1

来自他们的support forum，你可以使用Renderer.image：

$('#container').highcharts({

    // your setup

}, function (chart) { // on complete

    chart.renderer
         .image('//image.com/image.png', 100, 100, 30, 30)
         .add();
});

您的图片示例：http://jsfiddle.net/738bnv0b/3/

Answer 2

Credits标签只是一个文本，通常是图形数据源的链接。

您想在哪里放置徽标？因为您可以将它放在Highcharts元素之外并使用css定位它。

类似的东西：jsfiddle

    <script src="http://code.highcharts.com/highcharts.js"></script>
<div style="position:relative;">
    <a style="display: block;" href="http://remisture.no" >
        <img style="position:absolute; top: 0; right: 0; z-index: 1;" width="40" src="https://upload.wikimedia.org/wikipedia/en/thumb/3/3a/Burger_King_Logo.svg/1024px-Burger_King_Logo.svg.png" />
    </a>
    <div id="container" style="height: 400px"></div>

</div>

将自定义徽标添加到Highchart图表

2 个答案: