Ploty.js 和 Vue 中 xticks 的自定义格式

Question

我正在尝试为 Plotly.js 图表中的 xticks 和 yticks 应用自定义格式（对该库使用 Vue 包装器）。

我尝试使用标准的 d3 样式格式，但无法应用我尝试实现的格式。我用过：

xaxis: {
          tickformat: ",.2f",
        },

因此 200000 被格式化为 200,000.00，但我想要的格式是将 space 作为千位分隔符，以便 200000 变为 200 000.00。我找不到它在 d3 样式格式中的工作原理。是否有直接的方法将格式应用于绘图上显示的值？

这是我的例子： https://codesandbox.io/s/vuetify-playground-barchart-pw78w?file=/src/layout.vue

Answer 1

您只需像下面这样定义千位分隔符：

options: {
        responsive: true,
        locale: "en",
        locales: {
          en: {
            format: { thousands: " " },
          },
        },

Corrected code Referecnce

Ploty.js 和 Vue 中 xticks 的自定义格式

Custom formatting of xticks in Ploty.js and Vue

javascript

vue.js

plotly

plotly.js