ApexCharts.js 折线图 - 在工具提示中显示总数的百分比

Question

我想显示百分比而不是整数。现在，当鼠标悬停在图表的数据点（工具提示）上时，它只是将值显示为整数。

我想我需要在格式化程序公式中设置如下：

let test = value / SUM(all_values)
return test.toFixed(0) + '%'

但是，我在他们的文档中找不到它，我找到的最好的是这个，它总是为我提供 100% 的每个数据点：

    tooltip: {
      y: {
        formatter: function(value, opts) {
                let percent = opts.w.globals.seriesPercent[opts.seriesIndex][opts.dataPointIndex];
                return percent.toFixed(0) + '%'

        }
      }
    }

Answer 1

您是对的，您需要使用工具提示格式化程序，但是您用来获取百分比值的数组不正确。

如果你记录这些值，opts.w.globals.seriesPercent你会发现它都是 100：

[[100, 100, 100, ..., 100]]

（我怀疑这可能是因为它旨在与其他图表类型一起使用。）

不过，您仍然可以获得百分比，只是需要计算出来。

使用相同的方法设置工具提示的格式，但从中获取值opts.series：

    tooltip: {
        y: {
          formatter: function(value, opts) {
              const sum = opts.series[0].reduce((a, b) => a + b, 0);
              const percent = (value / sum) * 100;
              return percent.toFixed(0) + '%'
          },
        },
    }