时间戳

首页 > 解决方案 > 如何在 HighChart 中为 ColumnRange 图表的 xAixs 添加时间？

angular - 如何在 HighChart 中为 ColumnRange 图表的 xAixs 添加时间？

问题描述

我目前正在使用角度来显示 highcharts。我需要显示一个关于时间和用户名的 columnRange 图表。但我无法这样做。

所以我通过 API 获得的时间是字符串格式（'07:34:25'），我不能直接在 columnRange 图表中显示字符串。为此，我尝试将其转换为日期。这是不可能的。我也尝试使用 moment.js 但它也只返回字符串。

同样经过一番搜索，我得到了一种在 yAxis 中添加“日期时间”类型的解决方案。

yAxis: {
    type: 'datetime',
    min: 0,
    title: {
      text: charSeries.title,
    },
  }

但它正在抛出错误。

src/app/features/adminControl/modules/analyticsReport/components/averageDailyActionsReport/averageDailyActionsReport.component.ts(157,66)：错误TS2345：类型参数'{图表：{类型：字符串；倒置：布尔值；动画：布尔值；}; 标题：{文本：字符串；风格：{颜色：字符串；字体：字符串；}; 位置：{对齐：字符串；}; }; 副标题：{文本：字符串；样式：{浮动：布尔值；对齐：字符串；字体：字符串；}; }; ... 5 更多 ...; 学分：{ ...; }; }' 不可分配给“选项”类型的参数。

标签： angularhighcharts

解决方案

您可以使用category轴类型：

xAxis: {
    type: 'category'
},

series: [{
    data: [
        ['07:34:25', -9.9, 10.3],
        ['07:35:25', -8.6, 8.5],
        ['07:36:25', -10.2, 11.8],
        ['07:37:25', -1.7, 12.2],
        ['07:38:25', -0.6, 23.1]
    ]
}]

现场演示： https ://jsfiddle.net/BlackLabel/7o8f9ez5/

API 参考： https ://api.highcharts.com/highcharts/xAxis.type

推荐阅读