代码之家 › 专栏 › 技术社区 › VeggieBear

如何在ApexCharts甜甜圈图的悬停状态下获得中心标签为千的分隔符?

apexcharts vuejs3 javascript

2

VeggieBear · 技术社区 · 6 月前

我正在使用ApexCharts为Vue JS 3 Composition API构建一个甜甜圈图。我的目标是用千位分隔符显示数据。到目前为止,图表正确地将分隔符应用于圆环中间显示的总数,但当您将鼠标悬停在任一数据系列上,中间的文本更改为它们时,值为不用分隔符显示:

Total displayed with separator

On hover over a series, center text is NOT formatted with separator

如何让中心文本也显示带有分隔符的系列数据?

最初, This post helped me in formatting the total in the middle of the chart

我尝试添加一个格式化函数,返回value.toLocaleString()到plotOptions.douty.labels.value,但当鼠标悬停在甜甜圈部分时,它对中心显示的值没有影响。我在这里复制了图表本身 CodePen

图表选项:

const options = {
  series: [12039, 1899],
  chart: {
    type: "donut"
  },
  title: {
    text: "Customers Within Standards",
    align: "center",
    style: {
      fontSize: "14px"
    }
  },
  labels: ["Within Standards", "Not Within Standards"],
  dataLabels: {
    enabled: false
  },
  dataLabels: {
    enabled: false
  },
  plotOptions: {
    pie: {
      customScale: 0.8,
      expandOnClick: false,
      dataLabels: {
        enabled: false
      },
      donut: {
        size: "60%",
        labels: {
          show: true,
          value: {
            formatter: function (value) {
              return value.toLocaleString(); // doesn't appear to apply to text
            }
          },
          total: {
            show: true,
            formatter: function (value) {
              let total = value.globals.seriesTotals.reduce((a, b) => a + b, 0);
              return total.toLocaleString();
            }
          }
        }
      }
    }
  },
  legend: {
    position: "bottom",
    offsetY: -20
  },
  tooltip: {
    enabled: false
  },

1 回复 | 直到 6 月前

1

Drew Reese 6 月前

问题

当您计算聚合总数时,值类型为 number ,但输入值 value 类型是 string .所有对象都继承一个 toLocaleString 方法从 Object.prptotype ,但只有某些其他类型实现或覆盖此方法。请参阅 Object toLocaleString 了解详情。字符串只返回字符串。

console.log("123456.78".toLocaleString());         // "123456.78"
console.log(Number("123456.78").toLocaleString()); // "123,456.78"

解决方案

铸造 价值 在标签格式化程序中,先将数字格式化,以便国际化可以正确格式化它 作为一个数字 .

plotOptions: {
  pie: {
    customScale: 0.8,
    expandOnClick: false,
    dataLabels: {
      enabled: false
    },
    donut: {
      size: "60%",
      labels: {
        show: true,
        value: {
          formatter: function (value) {
            return Number(value).toLocaleString(); // <-- Cast to number
          }
        },
        total: {
          show: true,
          formatter: function (value) {
            let total = value.globals.seriesTotals.reduce((a, b) => a + b, 0);
            return total.toLocaleString();
          }
        }
      }
    }
  }
},