Javascript 绘制一天中的时间x轴highcart

我正在试着做一个热图highcart。我在一定时间内绘制所有购买的图形。我有一个数据点数组[[时间戳，购买金额]，[时间戳，购买金额]]。我希望我的图表有一个y轴，显示购买的金额和一个x轴，显示一天中购买的时间都在上午8点到下午6点之间。购买日期无关，只与时间有关。我不得不作弊，使x轴时间线性化，使时间像10.5510:55那样浮动。这显然不是一个好的解决方案，因为它在图中留下了0.6到0.99之间的空白。我所做的任何尝试，除了线性给我一个x轴显示从午夜几分钟。这是我目前的代码，工作环境很差

function scatterChartTimeMapper(timestamp){
        var ourDate = new Date(timestamp*1000);
        var hour = (ourDate.getHours()+1).toString();
        var mins = ourDate.getMinutes();

        if(mins<10)
            mins = "0" + mins;
        if(mins%10===0)
            mins = mins.toString();

        var time = hour + "."  + mins;

        return parseFloat(time);
} 

for(i=0;i<data.length;i++)
        {    
            var timePoint =      scatterChartTimeMapper(parseFloat(data[i].trim()));
            var segmentArray = [timePoint,parseFloat(data[i+1].trim())];
            newArray.push(segmentArray);
            i++;
        }

我对图形的JSON是： 数据：

            { 
                chart: {
                    type: 'scatter',
                    backgroundColor : 'transparent',
                    zoomType: 'xy'
                },
                title: {
                    text: bundle.action_fields_full.chart_title
                },
                subtitle: {
                    text: bundle.action_fields_full.sub_title
                },
                xAxis: {
                    title: {
                        enabled: true,
                        text: 'Time Of Day'
                    },
                    type : 'linear',
                    startOnTick: true,
                    endOnTick: true,
                    showLastLabel: true
                },
                yAxis: {
                    title: {
                        text: 'Tranaction Amount'
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -10,
                    y: 55,
                    floating: true,
                    backgroundColor: '#FFFFFF',
                    borderWidth: 1
                },
                plotOptions: {
                    scatter: {
                        marker: {
                            radius: 5,
                            states: {
                                hover: {
                                    enabled: true,
                                    lineColor: 'rgb(100,100,100)'
                                }
                            }
                        },
                        states: {
                            hover: {
                                marker: {
                                    enabled: false
                                }
                            }
                        },
                        tooltip: {
                            headerFormat: '<b>{series.name}</b><br>',
                            pointFormat: 'Time {point.x} , €{point.y} '
                        }
                    }
                },
                series: [{
                    name: 'Transactions',
                    color: 'rgba(223, 83, 83, .5)',
                    data: newArray
                }]
            } };

---

第一种解决方案是使用实际的十进制值——而不是10.55，10:55是10.91666，以此类推。。。第二种解决方案是使用基准日期，对于每个日期，只提取时间部分并将其附加到基准日期，并坚持使用datetime轴类型。我曾想过使用十进制值，这是数据的真实表示形式，但当用户悬停在数据点上时，问题就会出现，它显示的时间为10.83，这并不理想。我刚刚尝试了你使用基准日的想法，这是我没有想到的，它工作得很好，除了当一个数据点悬停在它上面时，以时间戳的形式显示时间，这同样是不理想的。有没有一种方法可以在不影响图形的情况下更改悬停上显示的内容？为什么不能使用xAxis的datime类型？嗨，塞巴斯蒂安，我确实将x轴类型更改为datetime。现在的问题是，当数据点悬停在悬停位置时，时间显示为时间戳。理想情况下，我想要的是“时间10:30”而不是“时间1457854584”。有没有办法在不影响图形的情况下更改悬停上显示的内容？->是-工具提示格式化程序功能或HeadPerformat属性可以消除显示的日期部分，或正确设置数字的格式|