【问题标题】:apexcharts Radial Charts font sizeapexcharts 径向图表字体大小
【发布时间】:2020-11-28 15:19:36
【问题描述】:

我使用 apexcharts 到我的网站,我有一些冲突,任何人都知道如何更改字体大小 值和标签放在底部,值放在中心

代码在这里

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();

【问题讨论】:

    标签: apexcharts


    【解决方案1】:

    请参考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,上面的设置已修改为将标签设置在图的底部,值居中。

    【讨论】:

      猜你喜欢
      • 2022-07-28
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-01-06
      • 1970-01-01
      相关资源
      最近更新 更多