时间戳

首页 > 解决方案 > highchart 散点图，y 轴为 24 小时时间，x 轴为交易日期

jquery - highchart 散点图，y 轴为 24 小时时间，x 轴为交易日期

问题描述

我有一些交易数据，我想创建带有 24 小时（交易发生的时间）的 y 轴和解释交易发生的日期的 x 轴的图形图表报告。

我使用 jquery highchart scatter，我想要类似这个 例子的东西。这是我使用一些示例数据时的结果。

但是当我插入太多数据时，它会变得像这个 奇怪的结果一样奇怪。

这是我的代码：

Highcharts.chart('graph', {
chart: {
    type: 'scatter',
    zoomType: 'xy'
},
title: {
    text: 'Transaction Hour'
},
subtitle: {
    text: '1 year'
},
xAxis: {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
    title: {
        enabled: true,
        text: 'Days'
    },
    startOnTick: true,
    endOnTick: true,
    showLastLabel: true
},
yAxis: {
    title: {
    enabled: true,
    text: 'Time'
},
type: 'datetime',
dateTimeLabelFormats: { //force all formats to be hour:minute:second
        second: '%H:%M:%S',
        minute: '%H:%M:%S',
        hour: '%H:%M:%S',
        day: '%H:%M:%S',
        week: '%H:%M:%S',
        month: '%H:%M:%S',
        year: '%H:%M:%S'
}
},
legend: {
    layout: 'vertical',
    align: 'left',
    verticalAlign: 'top',
    x: 100,
    y: 70,
    floating: true,
    backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
    borderWidth: 1
},
plotOptions: {
    scatter: {
        marker: {
            radius: 4,
            states: {
                hover: {
                    enabled: true,
                    lineColor: 'rgb(100,100,100)'
                }
            }
        },
        states: {
            hover: {
                marker: {
                    enabled: false
                }
            }
        },
        tooltip: {
            headerFormat: '<b>{series.name}</b><br>',
            pointFormat: '{point.x}, {point.y}'
        }
    }
},
series: [{
    name: 'A',
    color: 'rgba(153, 255, 102, .5)',
    data: [[Friday,1580455597000]]// unix timestamp

}, {name: 'B',
    color: 'rgba(223, 83, 83, .5)',
    data: [[Thursday,1580372483000],[Thursday,1580359660000]]// unix timestamp

}, {
    name: 'C',
    color: 'rgba(119, 152, 191, .5)',
    data: [[Friday,1580439732000]]// unix timestamp
}]
});

你能帮帮我吗？谢谢你。

此致，

埃卡

标签： jqueryhighchartsscatter

解决方案

请注意，使用这种数据结构会完全扰乱您的配置。您已将 设置yAxis.type为“数据时间”，并且您希望范围为 24 小时范围，但您的数据点之一是Fri Jan 31 2020 07:26:37，第二个数据点为Thu Jan 30 2020 08:21:23您提供了两个点之间几乎 23 小时的范围。添加第三点会使您的 yAxis 增加到另一个时间范围。

尝试改用此配置：https ://jsfiddle.net/BlackLabel/5e6sfcuq/

我使用labels.formatter回调在轴上获取所需的格式。并且yAxis 上的min和功能保持恒定范围。max

这是我对数据结构的建议：

data: [
  [1580455597000,new Date(1580455597000).getHours()]
] // unix timestamp

API：https ://api.highcharts.com/highcharts/yAxis.labels.formatter

API：https ://api.highcharts.com/highcharts/yAxis.tickInterval

如果有什么不清楚 - 随时问。

推荐阅读