高图散点图，Y轴为24小时时间，X轴为交易日。

Question

我有一些交易数据，我想创建图形图表报告，Y轴有24小时（交易发生的时间），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
}]
});

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

最好的祝愿。

埃卡

Answer 1

请注意，使用这种数据结构完全扰乱了你的配置。你已经设置了 yAxis.type 到'datatime'，你想把范围定在24小时范围内，但你的一个数据点是 Fri Jan 31 2020 07:26:37 而第二种是 Thu Jan 30 2020 08:21:23 这使你在两个点之间有近23小时的范围。增加第三个点会使你的yAxis增加到另一个时间范围。

试着用这个配置来代替。https:/jsfiddle.netBlackLabel5e6sfcuq 试试用这个配置代替：

我用的是 labels.formatter 回调来获取轴上想要的格式。而 min 和 max 的特征，以保持恒定的范围。

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

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

API: https:/api.Highcharts.comhighchartsyAxis.label.formatter https:/api.highcharts.comhighchartsyAxis.label.formatter。

API。https:/api.Highcharts.comhighchartsyAxis.tickInterval。

如果有什么不清楚的地方，请随时询问。