时间戳

首页 > 解决方案 > ApexCharts.js 折线图 - 在工具提示中显示总数百分比

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

问题描述

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

我想我需要像这样设置格式化程序公式：

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) + '%'

        }
      }
    }

每个数据点给我 100% 的错误值

标签： apexcharts

解决方案

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

如果您记录这些值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) + '%'
          },
        },
    }

推荐阅读