apexcharts 径向图表字体大小
apexcharts Radial Charts font size
我在我的网站上使用 apexcharts,我遇到了一些冲突,谁知道如何更改字体大小
value 和 labels 放在底部,value 放在中心
代码在这里
JavaScript
var options = {
series: [70],
chart: {
height: 350,
type: 'radialBar',
},
plotOptions: {
radialBar: {
hollow: {
size: '70%',
}
},
},
labels: ['Cricket'],
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
请参考 documentation 格式化数据标签及其对应值。可以在您的图表中覆盖以下属性 options
以设置字体大小和位置。
plotOptions: {
...
dataLabels: {
name: { // label name, eg: "Cricket"
...
fontSize: '<font size in px>' // default: 16px; change to preferred size
offsetY: <position offset from top> // +ve for downward, -ve for upward direction> // default: -10; change to >120 to push the label down
},
value: { // label value, eg: "70%"
...
fontSize: '<font size in px>' // default: 14px; change to required size
offsetY: <position offset from top> // default: +16; set to 0 to center the value
}
}
}
这里是 CodePen 修改了上述设置,将标签设置在绘图底部,值居中。
我在我的网站上使用 apexcharts,我遇到了一些冲突,谁知道如何更改字体大小 value 和 labels 放在底部,value 放在中心
代码在这里
JavaScript
var options = {
series: [70],
chart: {
height: 350,
type: 'radialBar',
},
plotOptions: {
radialBar: {
hollow: {
size: '70%',
}
},
},
labels: ['Cricket'],
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
请参考 documentation 格式化数据标签及其对应值。可以在您的图表中覆盖以下属性 options
以设置字体大小和位置。
plotOptions: {
...
dataLabels: {
name: { // label name, eg: "Cricket"
...
fontSize: '<font size in px>' // default: 16px; change to preferred size
offsetY: <position offset from top> // +ve for downward, -ve for upward direction> // default: -10; change to >120 to push the label down
},
value: { // label value, eg: "70%"
...
fontSize: '<font size in px>' // default: 14px; change to required size
offsetY: <position offset from top> // default: +16; set to 0 to center the value
}
}
}
这里是 CodePen 修改了上述设置,将标签设置在绘图底部,值居中。