如何用highchart制作讲台
How to make podium with highchart
这是我的图表 >> 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'
}
}
}]
但是结果变成了这样:
你能给我一个建议来解决我的问题吗?谢谢
您可以将 useHTML
选项设置为 true,然后用户 formatter to generate images: 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。
这是我的图表 >> 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'
}
}
}]
但是结果变成了这样:
你能给我一个建议来解决我的问题吗?谢谢
您可以将 useHTML
选项设置为 true,然后用户 formatter to generate images: 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。