angular - 在两行顶点图中显示数据标签

Question

我正在使用角度ng-apexcharts，我需要datalabels在两行中显示。我尝试使用"\n"但仍然无法将其设为 2 行

  dataLabels: {
    enabled: true,       
    formatter: function (val, opts) {
      var duration = opts.w.config.series[opts.seriesIndex]
      var h = Math.floor(duration / 3600);
      var m = Math.floor(duration % 3600 / 60);
      var s = Math.floor(duration % 3600 % 60);
      var hDisplay = h > 9 ? h : "0" + h;
      var mDisplay = m > 9 ? m : "0" + m;
      var sDisplay = s > 9 ? s : "0" + s;

      if (h > 0) {
        return hDisplay + ":" + mDisplay + "\n" + "hours";
      }
      else {
        return mDisplay + ":" + sDisplay + "\n" + "minutes";
      }
       
    },
  },

标签： angularng-apexcharts

Answer 1

您可以使用以下结构：["first line text", "second line text"]

dataLabels: {
        enabled: true,       
        formatter: function (val, opts) {
          var duration = opts.w.config.series[opts.seriesIndex]
          var h = Math.floor(duration / 3600);
          var m = Math.floor(duration % 3600 / 60);
          var s = Math.floor(duration % 3600 % 60);
          var hDisplay = h > 9 ? h : "0" + h;
          var mDisplay = m > 9 ? m : "0" + m;
          var sDisplay = s > 9 ? s : "0" + s;
    
          if (h > 0) {
            return [hDisplay + ":" + mDisplay , "hours"];
          }
          else {
            return [mDisplay + ":" + sDisplay , "minutes"];
          }
           
        },
      },

这是关于代码沙盒的工作示例

结果：