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

Question

我想用 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 }]
};

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

谢谢

Answer 1

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

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

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

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>

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

Zingchart plotting X-axis with Times, not Dates

javascript

plot

datetime

transform

zingchart