Question

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

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

次：＆＃34; 00：00：00＆＃34;，＆＃34; 00：01：00＆＃34;，＆＃34; 00：10：00＆＃34;，＆＃34; 00： 11：00＆＃34;

我将这些值解析为（int）

次：0,6000,60000,66000

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

这是我的json代码。我玩了“时间”字段，没有成功：

// 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 }]
};

如何在仍在操作TIMES而不是日期时间的情况下显示“小时”字段？如果总小时数超过24小时怎么样？我可以显示总小时数或添加日期字段。例：＆＃34; 124：22：01＆＃34;要么＆＃34; 5：4：22：01＆＃34;

谢谢

Answer 1

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

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

您无法在库中原生显示124小时。根据您的输入数据，您可以使用自定义x轴标签和标记格式化并绘制自己的值。由于您似乎已经拥有了所需的字符串格式，为什么不继续使用它呢？

＆＃13;

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%' 
});

＆＃13;

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

＆＃13;

<!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>

＆＃13;

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

2 个答案: