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

Question

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

我使用 jquery highchart 散点图，我想要这样的东西 example。这是我使用一些示例数据时的结果。

但是当我插入太多数据时，它变得像这样奇怪 weird result.

这是我的代码：

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
}]
});

你能帮帮我吗？之前谢谢你。

此致，

埃卡

Answer 1

请注意，使用这种数据结构会完全扰乱您的配置。您已将 yAxis.type 设置为 'datatime' 并且您希望范围为 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

如有不明之处，欢迎随时提问。

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

highchart scatter with 24 hours time on y axis and the day of the transaction on x axis

jquery

highcharts

scatter