如何登上领奖台与highchart-Java 学习之路

这是我的图表>> click here . 我想用highchart制作这样的视图
是否有可能在图表上方添加不同的图片？

enter image description here

我已经使用dataLabel在图表中显示标签 . 这是我的代码：

series: [{
        name: 'RATING',
        data:[
            ['MD', 2],
            ['ML', 4],
            ['SB', 5],
            ['JB', 3],
            ['TB', 1]
            ],
        dataLabels: {
            enabled: true,
            color: 'white',
            align: 'center',
            x: 3,
            y: 10,
            style: {
                fontSize: '50px',
                fontFamily: 'Verdana, sans-serif',
                textShadow: '0 0 3px black'
            }
        }
    }]

但结果变成这样：
enter image description here

你能给我一个建议来解决我的问题吗？谢谢 .

1 回答

您可以将 useHTML 选项设置为true，然后将用户formatter设置为生成图像：http://jsfiddle.net/ypb6zwd3/3/

现在只需要一些抛光就可以按照您想要的方式放置标签：

y: 60, // position label in a proper place
            useHTML: true, // required
            overflow: false, //disable overflow
            crop: false, // disable cropping
            formatter: function() {
                  return '<img src="http://highcharts.com/demo/gfx/sun.png" /> <br>' + (6 - this.y);   // <br> tag breaks dataLabel into two lines
            },

现在，您需要做的就是为每个列提供正确的图像URL .

回复于 2024-05-02T20:15:41+08:00

如何登上领奖台与highchart

1 回答

相关问题