堆栈内存溢出
  繁体   English   中英

Highcharts日期不起作用

[英]Highcharts date not working

 原文  2018-07-02 15:43:45  8   2    javascript/ datetime/ highcharts

问题描述

我正在为一个项目学习一些Highcharts，这是我的第一次，当我尝试使用我的数据集（VAST challenge 2017 MC1）和从一行到另一列更改时间线演示时，我遇到了一个奇怪的问题。 在您提问之前，我已经检查了StackOverflow上可以找到的所有内容。

["1430441008000", 50]是日期正确地发送到图表和正确的js时间戳["1430441008000", 50] ; 我给系列提供的完整对象结构是： {type: "column", name: "4 axle+ truck", data: ["1430441008000", 50] 。

列正确显示，唯一的问题是所有内容都可以追溯到1970年1月1日。完整代码在代码段中，您将在问题末尾找到一段CSV用于测试目的。 

 let rawData; let dataArray = []; const labels = {"1": "2 axle car", "2": "2 axle truck", "3": "3 axle truck", "4": "4 axle+ truck", "5": "2 axle bus", "6": "3 axle bus", "2P": "park patrol"}; $(document).ready(function(){ d3.csv("/csv/data.csv", function(error, d){ if (error) throw error; rawData=d; piechart(pieChartHelper()); timeLine(timeLineHelper()); }); }); function piechart(pieData){ Highcharts.chart('container', { chart: { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false, type: 'pie' }, title: { text: 'Vehicle Types' }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, format: '<b>{point.name}</b>: {point.percentage:.1f} %', style: { color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' } } } }, series: [{ name: "Results", colorByPoint: true, data:pieData }] }); } function pieChartHelper() { let pieData; let pieData2 = []; for (let i = 0; i < rawData.length; i++) { dataArray.push({ name: labels[rawData[i]["car-type"]], y: rawData[i]["car-type"]!=="2P" ? Number(rawData[i]["car-type"]) : '8' }); } pieData = d3.nest() .key(function(d){return d.name;}) .rollup(function(d){ return Math.round(d3.sum(d, function(g){return gy;})); }).entries(dataArray); for (let i = 0; i < pieData.length; i++) { pieData2.push({ name: pieData[i].key, y: pieData[i].values }) } return pieData2; } function toTimestamp(strDate){ let A = _.toInteger(strDate.slice(0,4)); let M = _.toInteger(strDate.slice(5,7))-1; let D = _.toInteger(strDate.slice(8,10)); let H = _.toInteger(strDate.slice(11,13)); let m = _.toInteger(strDate.slice(14,16)); let s = _.toInteger(strDate.slice(17,19)); return Date.UTC(A,M,D,H,m,s); } function timeLine(data){ Highcharts.chart('container2', { chart: { zoomType: 'x' }, tooltip: { formatter: function() { var date = new Date(this.x); var year = date.getFullYear(); return year + '<br/>' + '<span style="color:'+this.series.color+'">'+ this.series.name +'</span>: '+ this.y; }, }, title: { text: 'USD to EUR exchange rate over time' }, subtitle: { text: document.ontouchstart === undefined ? 'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in' }, xAxis: { type: 'datetime', dateTimeLabelFormats:{ millisecond: '%H:%M:%S.%L', second: '%H:%M:%S', minute: '%H:%M', hour: '%H:%M', day: '%e. %b', week: '%e. %b', month: '%b \\'%y', year: '%Y' } }, yAxis: { title: { text: 'Exchange rate' } }, legend: { enabled: false }, plotOptions: { area: { fillColor: { linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, stops: [ [0, Highcharts.getOptions().colors[0]], [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')] ] }, marker: { radius: 2 }, lineWidth: 1, states: { hover: { lineWidth: 1 } }, threshold: null } }, series: data }); } function timeLineHelper(){ let timeArray = []; let timeArray2 = []; console.log(rawData[0]["Timestamp"]); console.log(toTimestamp(rawData[0]["Timestamp"])); for (let i = 0; i < rawData.length; i++) { timeArray.push({ name: labels[rawData[i]["car-type"]], data: { key: rawData[i]["Timestamp"].slice(0,10), value: 1 } }); } console.log("time array: "+ timeArray[0].data.key ); timeArray = d3.nest() .key(function(d) { return d.name; }) .key(function(d) { return d.data.key; }) .rollup(function(v) { return d3.sum(v, function(d) { return (d.data.value); }); }) .entries(timeArray); for (let i = 0; i < timeArray.length; i++) { timeArray2.push({ type: 'column', name: timeArray[i].key, data: [ _.toString(toTimestamp(rawData[i]["Timestamp"])), timeArray[i].values[0].values] }); } console.log(timeArray2); return timeArray2; } 
 <!DOCTYPE html> <html lang="en"> <head> <title>Progetto VA</title> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,800"> <link rel='stylesheet' href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <h1>IT WORKS!</h1> <div id="container"></div> <div id="container2"></div> <script src="/js/jquery.min.js"></script> <script src="/js/tether.min.js"></script> <script src="/js/d3.min.js"></script> <script src="/js/hc/highcharts.js"></script> <script src="/js/va.js"></script> <script src="/js/bootstrap.min.js"></script> <script src="/js/lodash.js"></script> </body> </html>

CSV： 

Timestamp,car-id,car-type,gate-name
2015-05-01 00:43:28,20154301124328-262,4,entrance3
2015-05-01 01:03:48,20154301124328-262,4,general-gate1
2015-05-01 01:06:24,20154301124328-262,4,ranger-stop2
2015-05-01 01:09:25,20154301124328-262,4,ranger-stop0
2015-05-01 01:12:36,20154301124328-262,4,general-gate2
2015-05-01 01:24:02,20154301124328-262,4,general-gate5
2015-05-01 01:31:41,20153101013141-937,1,entrance3
2015-05-01 01:33:57,20154301124328-262,4,entrance4
2015-05-01 01:53:34,20153101013141-937,1,general-gate1
2015-05-01 01:56:20,20153101013141-937,1,ranger-stop2
2015-05-01 01:59:36,20153101013141-937,1,ranger-stop0
2015-05-01 02:03:01,20153101013141-937,1,general-gate2
2015-05-01 02:15:17,20153101013141-937,1,general-gate5
2015-05-01 02:25:58,20153101013141-937,1,entrance4
2015-05-01 02:52:12,20155201025212-846,4,entrance1
2015-05-01 02:53:12,20155301025312-741,4,entrance3
2015-05-01 03:01:46,20150101030146-497,3,entrance4
2015-05-01 03:05:45,20155201025212-846,4,general-gate7
2015-05-01 03:13:05,20155201025212-846,4,general-gate4
2015-05-01 03:16:55,20155301025312-741,4,general-gate1
2015-05-01 03:19:56,20155301025312-741,4,ranger-stop2
2015-05-01 03:21:55,20150101030146-497,3,entrance2
2015-05-01 03:23:26,20155301025312-741,4,ranger-stop0
2015-05-01 03:24:45,20155201025212-846,4,general-gate1

2 个解决方案

解决方案1
 2 已采纳  2018-07-03 12:33:33

我认为列的格式存在问题。 现在，对于每个值，你创建一个单独的系列（就像馅饼系列）。 我想你想创建一个系列，有多个点。 为列启用图例以确认我在说什么。

这部分是错的： 

for (let i = 0; i < timeArray.length; i++) {
    timeArray2.push({
        type: 'column',
        name: timeArray[i].key,
        data: [
            _.toString(toTimestamp(rawData[i]["Timestamp"])),
            timeArray[i].values[0].values]
    });
}

应该更像这样： 

timeArray2 = [{
    data: [],
    name: 'My series name',
    type: 'column'
}];
for (let i = 0; i < timeArray.length; i++) {
    timeArray2[0].data.push([
        _.toString(toTimestamp(rawData[i]["Timestamp"])),
        timeArray[i].values[0].values
    ]);
}

当然，这是除了什么@Mike Zavarello说：改变string到number为x值。

解决方案2
 1  2018-07-02 19:16:09

我注意到你的时间戳似乎没有正确的格式。

Highcharts期望时间戳的数值。 而不是data: ["1430441008000", 50] ，它应该是data: [1430441008000, 50] 。

请参阅此示例演示中的数据： https ： //jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/arearange-line/ 

var ranges = [
    [1246406400000, 14.3, 27.7],
    [1246492800000, 14.5, 27.8],
    [1246579200000, 15.5, 29.6],
    [1246665600000, 16.7, 30.7],
    [1246752000000, 16.5, 25.0],
...

我希望这对你有所帮助。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Highcharts x轴日期分组不起作用 Highcharts系列区域在x轴上不适用于UTC日期值 将日期格式转换为高图 Highcharts - 系列中的跳过日期 Highcharts列范围日期图表 高图中的日期格式问题 Highcharts勾选日期格式 Highcharts两个日期比较 Highcharts日期解析问题 PHP Highcharts按日期分组
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM