如何使用 highchart 制作领奖台答案

【问题标题】：How to make podium with highchart如何使用 highchart 制作领奖台
【发布时间】：2023-03-09 11:28:01
【问题描述】：

这是我的图表>>click here。我想用 highchart 制作这样的视图
可以这样在图表上方添加不同的图片吗？

我已经使用 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'
            }
        }
    }]

但是结果变成了这样：

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

【问题讨论】：

您为此使用 highcharts 是否有特定原因？您可以使用几个 div 和 img 元素轻松构建它，而无需包含整个图表库。
在我选择使用图表之前，我使用 img 和 div。但是当我缩小或放大时，结果很乱。

标签： javascript jquery html arrays highcharts

【解决方案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
            },

现在，您需要做的就是为每一列提供正确的图片网址。

【讨论】：

你很棒。但是，将值 24531 转换为 42135 的代码在哪里？能给我看看么？以及如何将数据 MD、ML、SB、JB、TB 显示到数据标签？
好吧，只需检查我的代码中的格式化程序.. 就是这部分：(6 - this.y) :) 我建议阅读 API 中的 datLabels.formatter - 您可以访问 this.name 等。跨度>