Javascript 在HighCharts中显示基于时间的登录_Javascript_Logging_Highcharts

Javascript 在HighCharts中显示基于时间的登录

javascript logging highcharts

Javascript 在HighCharts中显示基于时间的登录,javascript,logging,highcharts,Javascript,Logging,Highcharts,我需要在柱状图的X轴上显示从设备获取的一些日志的时间值。柱状图的Y轴值为常量，基本上我希望在获取日志时将日志显示为条日志的日期、时间格式如下：2015-05-07T06:08:54.430062Z 我知道这是ISO格式，所以我使用 var myDate = new Date(dt); var result = myDate.getTime(); 所得结果如下1430978934438。当我转换时，其他日志也会得到类似的值，即使它们有不同的时间假设我有10个日志，图表只显

我需要在柱状图的X轴上显示从设备获取的一些日志的时间值。柱状图的Y轴值为常量，基本上我希望在获取日志时将日志显示为条

日志的日期、时间格式如下：2015-05-07T06:08:54.430062Z

我知道这是ISO格式，所以我使用

var myDate = new Date(dt);          
var result = myDate.getTime();

所得结果如下1430978934438。当我转换时，其他日志也会得到类似的值，即使它们有不同的时间

假设我有10个日志，图表只显示了其中的4个。我用

var value=10;// this is a fixed constant value, since I want the log sticks to be of same height.
series.addPoint([result , value], false, false);

如何将所有日志视为与每个日志条目对应的条

如果你需要更多的信息，请告诉我。我对HighCharts和JS还比较陌生，所以任何正确方向的帮助都会非常有用

谢谢

在下面添加了代码

for (var i = 0; i < nSeries; i++) {         
 dt=jsonData[i].isodate;
 var myDate = new Date(dt);         
 var result = myDate.getTime();         
 var series = mychart.series[0];
 series.addPoint([result, value], false, false);
}

mychart.redraw();


    instance.create = function(Highcharts, container) {
        Highcharts.setOptions({
            global: {
                useUTC: false
            }
        });

        var self = this;
        mychart = new Highcharts.Chart({
            chart: {
                renderTo: container,
                defaultSeriesType: 'column',
                plotBorderWidth: 1,
                showAxes: true,
                animation: Highcharts.svg 
            },
            title: {
                text: 'Logs'
            },
            xAxis: {
                type: 'datetime',
                events: {
                    setExtremes: function (e) {
                        console.log('e.min: ' + Highcharts.dateFormat(null, e.min) +
                                ' | e.max: ' + Highcharts.dateFormat(null, e.max) + ' | e.trigger: ' + e.trigger);
                        if (e.trigger) {
                            self.autoScroll = false;
                        }
                    }
                }
            },
            yAxis: {
                title: {
                    text: ''
                }
            },
            tooltip: {
                formatter: function () {
                    console.log(this);
                    return '<b>' + this.series.name + '</b><br/>' +
                    Highcharts.dateFormat('%H:%M:%S.%L', this.x) + '<br/>'+this.key;
                }
            },
            legend: {
                enabled: true
            },
            exporting: {
                enabled: true
            },
            plotOptions: {
                column: {
                    stacking: null
                }
            },
            scrollbar: {
                enabled: true
            },
            series: [{
                name: 'Logs',
                data: [],
                stack: 'LogStack'
            }]
        });
    };

（变量i=0；i


dt=jsonData[i].等时数据；
var myDate=新日期（dt）；
var result=myDate.getTime（）；
var系列=mychart.series[0]；
series.addPoint（[结果，值]，false，false）；
}
mychart.redraw（）；
instance.create=函数（Highcharts、容器）{
Highcharts.setOptions({
全球：{
useUTC:false
}
});
var self=这个；
mychart=新的Highcharts.Chart({
图表：{
renderTo：容器，
defaultSeriesType:“列”，
打印边框宽度：1，
是的，
动画：Highcharts.svg
},
标题：{
文本：“日志”
},
xAxis：{
键入：“日期时间”，
活动：{
设置极端值：函数（e）{
console.log（'e.min:'+Highcharts.dateFormat（null，e.min）+
“| e.max:”+Highcharts.dateFormat（null，e.max）+“| e.trigger:”+e.trigger）；
如果（如触发器）{
self.autoScroll=false；
}
}
}
},
亚克斯：{
标题：{
文本：“”
}
},
工具提示：{
格式化程序：函数（）{
console.log（this）；
返回“+this.series.name+”
+
Highcharts.dateFormat（“%H:%M:%S.%L'，this.x）+'
'+this.key；
}
},
图例：{
已启用：true
},
出口：{
已启用：true
},
打印选项：{
专栏：{
堆叠：空
}
},
滚动条：{
已启用：true
},
系列：[{
名称：'日志'，
数据：[]，
堆栈：“LogStack”
}]
});
};

能否附上所有与Highcharts相关的代码？我的意思是创建图表，并添加点。简而言之：它应该可以工作，除非你有完全相同的时间戳。有趣的是，只显示了4个日志，而不是全部日志。我在问题中附上了创建图表和绘制点代码。问题是，将时间戳转换为“06:08:54.430062”、“06:08:54.430162”会得到类似1430978934438的值，因此无法为每个值正确呈现图形。哦，现在我明白了。所以你有两个点在距离。。。0.1ms？我不确定中的

Date（）

in是否能够处理此类日期。我会这样做：

var myDate=newdate（dt）；var result=myDate.getTime（）+parseFloat（“0.”+dt.substring（dt.length-3，dt.length））

->因此，您将得到如下结果：

14309789334930.162

。在您的情况下，

n系列是什么？不应该有jsonData.length
？另外，我想，你可以看到这些点，因为它们非常接近。然后你有巨大的差距和另外三个非常接近的点。尝试放大第一个可见点：（拖放）。您可以使用类别来代替，以使点之间的空间相等，但我不确定这是否是最好的主意：如果您有高库存，那么实际上ordinal
的工作原理与类别类似。你也可以在轴上考虑。当然，你需要计算休息时间。我可以建议的另一个解决方案是操纵数据。简而言之，将值四舍五入到1秒（或至少1ms），然后使用例如标志，可以高亮显示同一点上的更多点（但时间戳必须相同，例如2ms不起作用，请参见示例：）。