场景:
我能够使用 Zingchart 获得状态图，使用堆叠的 hbar 并绘制元素状态不变的数据间隔:
但是，我希望在提供时间的轴上有更高的分辨率。
问题:
我无法增加 y-axis 中的刻度数(这是一个堆叠的 hbar 图，所以通常的 x-axis 实际上是 y-axis )。
如果我在 step:"1hour", 字段中引入 scaleY 我会回到纪元 0，这就是我得到的:
问题:
我究竟做错了什么？我想要:
data-customValue？ 在代码中，我从 epoch 0 跳转到我开始有数据的时间，并将
minValue 定义为我有数据减去一秒的第一个 epoch。这是工作代码(未定义
step 属性):<!DOCTYPE html>
<html>
<head>
<script src="/home/eballes/Work/backup/zingchart_test/zingchart_2.3.3/zingchart.min.js"></script>
<script>
zingchart.MODULESDIR = "/home/eballes/Work/backup/zingchart_test/zingchart_2.3.3/modules/";
</script>
<style></style>
</head>
<body>
<div id='myChart'></div>
<script>
var myConfig = {
type: "hbar",
utc:true,
title: {
text: 'Status'
},
scaleY:{
transform:{
type:'date',
all:"%d/%M/%Y\n%H:%i:%s",
},
minValue:1456693864000,
zooming:true,
label:{
"text": "Time",
},
tick:{
"line-color":"black",
"line-width":"2px",
"size":8,
},
maxItems:10,
itemsOverlap:true,
item:{
"font-size":10
},
},
scaleX:{
label:{
"text": "Item",
},
},
plot:{
stacked:true,
exact:false,
barWidth:10,
rules:[
{
rule:'%data-customValue == 0',
alpha:0, // Transparent
},
{
rule:'%data-customValue == 1',
backgroundColor:'#0000FF' // Dark Blue
},
{
rule:'%data-customValue == 2',
backgroundColor:'#00FFFF' // Light Blue
},
{
rule:'%data-customValue == 3',
backgroundColor:'#FF7F50' // Orange
},
{
rule:'%data-customValue == 4',
backgroundColor:'#FFFF00' // Yellow
},
{
rule:'%data-customValue == 5',
backgroundColor:'#EE82EE' // Purple
},
{
rule:'%data-customValue == 6',
backgroundColor:'#00FF00' // Green
},
{
rule:'%data-customValue == 7',
backgroundColor:'#FF0000' // Red
},
]
},
tooltip:{
jsRule:"CustomFn.formatTooltip()",
},
series : [
{
values : [
[1,1456693864000],
[2,1456693864000],
.... // From 1 to 36
[36,1456693864000],
],
'data-customValue':[0,0,0,0,0,0,
0,0,0,0,0,0,
0,0,0,0,0,0,
0,0,0,0,0,0,
0,0,0,0,0,0,
0,0,0,0,0,0],
},
{
values : [
[11, 32000], [12, 10270000], [14, 5033000], [18, 79000], [20, 43000], [24, 76000], [26, 4043000], [8, 33000], [9, 63000],
],
'data-customValue':[2, 6, 6, 0, 1, 2, 6, 1, 0, ],
},
{
values : [
[14, 3000], [19, 20000], [26, 1000], [8, 86000], [9, 13000],
],
'data-customValue':[2, 2, 2, 0, 1, ],
},
// All intervals
]
};
CustomFn = {};
CustomFn.formatTooltip = function(p){
var hours = Math.floor(p.value / 3600000);
var minutes = Math.floor((p.value % 3600000) / 60000);
var seconds = (p.value % 60000)/1000;
var tooltipText = "Item: " + p.scaletext + "\nDuration: ";
var hoursText = (hours == 0) ? "" : (hours + "h ");
var minutesText = (minutes == 0) ? "" : (minutes + "m");
var secondsText = (seconds == 0) ? "" : (seconds + "s");
tooltipText = tooltipText + hoursText + minutesText + secondsText + "\n";
tooltipText = tooltipText + "Value: " + p['data-customValue'];
var alpha = 70;
// We don't want any tooltip for the time-jump
if (hours > 300000) {
tooltipText = "";
alpha = 0;
}
return {
text : tooltipText,
backgroundColor : "#222",
alpha: alpha,
}
};
zingchart.render({
id : 'myChart',
data : myConfig,
height: 670,
width: '100%'
});
</script>
</body>
</html>
这是整个示例的 Plunker 链接，不起作用。如果删除
step:"1hour" 行，它将起作用。有趣的是，
step:20 工作正常。但我更愿意以正常的方式进行我的步骤，例如每小时。注意:只是为了提供更多上下文，这个问题是另一个 previous 问题的延续。
最佳答案
完全披露，我是 ZingChart 团队的成员。
第一个问题是
step:'1hour'
该字符串值被我们的库解释为值 0。这是因为字符串 '1hour' 不匹配我们的任何关键字，也不会评估为 Number 类型。我们不是简单地使用 parseInt，所以它不会评估为 1。
如果你想要一个小时的步数，你可以以毫秒为单位进行步数计算。这在我们的 scales page 中有记录。
step:3600000
为了显示比例值，我们有一个 tokens 列表，它允许您将比例值添加到工具提示中。在您的 customFn.formatTooltip 中，您将添加这一行。
...
tooltipText = tooltipText + "Value: " + p['data-customValue'];
tooltipText += '<br> %vv'
%vv 在我们的 tokens 列表中，它将从 y 轴上获取转换后的值。如果你做了 %vt 它会给你毫秒值。关于javascript - 在 Zingchart 中定义 'step' 属性会使图形不可用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38033612/