Zingchart 用时间而不是日期绘制 X 轴答案

【问题标题】：Zingchart plotting X-axis with Times, not DatesZingchart 用时间而不是日期绘制 X 轴
【发布时间】：2017-02-06 16:01:11
【问题描述】：

我想用我的 X 轴表示时间跨度（经过的时间）而不是实际日期来绘制数据。

我有一个包含以下（字符串）值的系列：

次：“00:00:00”、“00:01:00”、“00:10:00”、“00:11:00”

我将这些值解析为 (int)

次：0、6000、60000、66000

但是当我绘制图表时，小时字段是错误的。它显示“2”而不是“0”或“00”。分钟和秒似乎很好：

这是我的 json 代码。我玩了 Hours 字段，但没有成功：

// Description of the graph to be displayed
vm.chartJson = {
   type: 'line',
   scaleX: {
      transform: {  
         type: 'date',  
         all: '%H:%h:%G:%g:%i:%s'  
      }
   },
   series: [{ values: data }]
};

如何显示小时字段，同时仍然操作时间而不是日期时间？如果总小时数超过 24 小时会怎样？我可以显示总小时数或添加日期字段。例子： “124:22:01”或 “5:4:22:01”

谢谢

【问题讨论】：

标签： javascript datetime plot transform zingchart

【解决方案1】：

我可以注意到的一个问题是我们需要以毫秒为单位的时间。所以一分钟 = 60000 毫秒。这可能是第一件事。在所有值的末尾加上一个零。

第二个问题，我不能完全复制你的时间，因为你的本地机器时区正在被使用，我认为我的时间不同。我们有解释这一点的属性，但这可能不是必需的。进一步阅读。

您无法在库中本地显示 124 小时。根据您的输入数据，您可以使用自定义 x 轴标签和标记来格式化和绘制您自己的值。既然你似乎已经有了你想要的字符串格式，为什么不继续使用呢？

var customLabels = ['00:00:00', '00:01:00', '00:10:00','00:11:00'];
var myConfig = {
 	type: 'line',
  scaleX: {
    labels: customLabels
  },
  tooltip: {
    textAlign: 'left',
    text: '%kl<br>OR<br>%data-dates: %v'
  },
	series: [
		{
			values: [475, 420, 400, 500],
			dataDates: customLabels, // one for each point in values array
		}
	]
};

zingchart.render({ 
	id: 'myChart', 
	data: myConfig, 
	height: '100%', 
	width: '100%' 
});

html, body {
	height:100%;
	width:100%;
	margin:0;
	padding:0;
}
#myChart {
	height:100%;
	width:100%;
	min-height:150px;
}
.zc-ref {
	display:none;
}

<!DOCTYPE html>
<html>
	<head>
		<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
	</head>
	<body>
		<div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
	</body>
</html>

相关文档：

demo link

tokens。网格中的第三个是自定义令牌，以 data- 开头。

tooltips

scales

【讨论】：

胡纳德基。谢谢回复。这确实是我当地时间的问题。 1970 年 1 月 1 日，我的机器时间已经是凌晨 2 点。因此 2. 你的解决方案不适合，因为我失去了 x 轴上的比例。就好像0到1min之间的时间有1min到10min一样长。

【解决方案2】：

这是我为解决问题所做的：

// Determine the format of x-axis
var format = '%i:%s';
if (data[data.length - 1][0] >= 3600000) format = '%G:%i:%s';

// Description of the graph to be displayed
vm.chartJson = {
  type: 'line',
     scaleX: {
     transform: {  
        type: 'date',  
        all: format
     }
  },
  series: [{ values: data }],
  "utc": true,
  "timezone": 0
};

我无法显示超过 24 的小时数，因此如果需要我可以显示天数。

【讨论】：