使用日期时间类型时 Apexcharts xaxis 格式化失败

Question

我使用 vue-apexcharts 在仪表板中绘制图表。我创建了一个通用文件，其中包含所有图表的基本选项（以统一样式和代码可重用性），并在必要时使用mergeDeep() 函数扩展/覆盖该对象。xaxis 类型默认定义为“类别”，如果“日期时间”图表需要，此值稍后会更改。

当将 xaxis.type 覆盖为“datetime”时，图表会失败并显示 unix 纪元值而不是格式化的字符串日期。如果图表是独立的或者如果我从基本选项文件中删除 de xaxis.labels 对象，则不会发生这种情况。

我正在使用最新的 apexchart (3.8.0) 和 vue-apexcharts (1.3.6) 版本。

使用 new Date() 可以正确创建日期。

我尝试过的事情：

1. 独立图表。有效，但我可能需要合并图表

2. 删除 apexchartGenericOptions.js 对象中的 xaxis.labels 对象。有效，但轴没有样式。

3. 使用 JSON.parse(JSON.stringify(options)) 深度克隆所有单独的选项对象。mergeDeep() 函数使用 Array.reduce 创建一个完整的新对象，因此它不应该是突变问题。不起作用。

4. 重置几个我不知道在哪里创建的属性convertedCatToNumeric: true，和categories: []。不起作用

我创建了一个codesandbox示例

x轴配置在apexchartGenericOptions.js

export default {
  (...)
  xaxis: {
    type: 'category',
    labels: {
      show: true,
      style: { colors: '#bcc6d3', fontSize: '10px', fontFamily: 'Nunito Sans, sans-serif' },
    },
    axisBorder: { show: false },
    axisTicks: { show: false },
    tooltip: { enabled: false },
  },
  (...)
},

不同图表的新选项对象apexOptions.js

import mergeDeep from '../mergeDeep';
import apexchartGenericOptions from './apexchartGenericOptions';
import apexchartPieOptions from './apexchartPieOptions';

export default {
  columns: mergeDeep(apexchartGenericOptions, { xaxis: { type: 'datetime' } }),
  lines: mergeDeep(apexchartGenericOptions, { ... }),
  pie: mergeDeep(apexchartGenericOptions, apexchartPieOptions), 
};

在我的 vue 组件中，我将其存储到数据中或以计算形式返回

export default {
  (...)
  xaxis: {
    type: 'category',
    labels: {
      show: true,
      style: { colors: '#bcc6d3', fontSize: '10px', fontFamily: 'Nunito Sans, sans-serif' },
    },
    axisBorder: { show: false },
    axisTicks: { show: false },
    tooltip: { enabled: false },
  },
  (...)
},

import ApexChart from 'vue-apexcharts';
import apexOptions from '@/utils/charts/apexOptions';

export default {
  name: 'my-component',
  data() {
    return { apexOptions };
  },
  (...)
};

我希望 xaxis 在折线图中绘制为类别，在柱形图中绘制为格式化字符串日期时间，但它被绘制为数字 unix 纪元。仅当我删除其中的 xaxis.labels 对象apexchartGenericOptions.js或仅绘制一张图表时才能正确绘制。

Answer 1

如果您仍然对此感兴趣，我可能会在阅读代码库后找到解决方案。

tickPlacement: 'between'只需像这样设置xaxis：

export default {
  (...)
  xaxis: {
    type: 'category',
    labels: {
      show: true,
      style: { colors: '#bcc6d3', fontSize: '10px', fontFamily: 'Nunito Sans, sans-serif' },
    },
    axisBorder: { show: false },
    axisTicks: { show: false },
    tooltip: { enabled: false },
    tickPlacement: 'between'
  },
  (...)
}

正如我在文档中读到的那样，此选项不会对结果产生任何明显的变化，但它对我们的有用之处在于防止这种情况成立，因此它永远不会将类别转换为数字。十分简单 ：）））

https://github.com/apexcharts/apexcharts.js/blob/c18e848c6e29c10ee45d43a1731d8b3190fda5d4/src/modules/settings/Config.js#L107