Apexcharts-甜甜圈 - 将甜甜圈上的百分比标签更改为传奇

Question

我希望创建一个甜甜圈图表，其中我想强调每个元素的标签/传说，而不是显示总数的馅饼。

我已经尝试使用格式化函数，例如

  formatter: function(value, { seriesIndex, dataPointIndex, w }) {
    return w.config.series[seriesIndex].name + ":  " + value.toFixed(0)+ " %"
  },

，这会在每个甜甜圈细分市场上产生标签 - 未定义：26％

会喜欢关于如何执行此操作的任何想法。

非常感谢，

奈杰尔

Answer 1

对于甜甜圈图，标签与数据值分开存储（即series）。

创建图表时，您将传递以下值：

options = {
    series: [44, 55, 13, 33],
    labels: ['Apple', 'Mango', 'Orange', 'Watermelon']
}

或者如果使用react/vue ：（

series: [44, 55, 13, 33],
chartOptions: {
    labels: ['Apple', 'Mango', 'Orange', 'Watermelon']
}

两个示例来自文档，经过轻微的修改。）

这意味着要访问格式化函数中的标签，我们需要参考labels而不是seripers。我们还可以删除.name。

  formatter: function(value, { seriesIndex, dataPointIndex, w }) {
    return w.config.labels[seriesIndex] + ":  " + value.toFixed(0)+ " %"
  },