在 Zingchart 中定义 'step' 属性会导致图形不可用

Question

场景：

我能够使用 Zingchart 获得状态图，使用 堆叠 hbar 并绘制元素状态不变的数据间隔：

但是，我希望在提供时间的轴上有更多的分辨率。

问题：

我无法在 y-axis 中增加 ticks 的数量（这是一个堆叠的 hbar 图表，所以通常的 x-axis 实际上是 y-axis).

如果我在 scaleY 字段中引入 step:"1hour",，我会回到纪元 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>

这是整个示例的 link 到 Plunker，不起作用。如果您删除行 step:"1hour"，它将起作用。

很有趣，step:20 工作正常。但我更愿意以正常的方式进行我的步骤，例如每小时。

注意：只是为了提供更多背景信息，这个问题是另一个问题的延续。

Answer 1

完全公开，我是 ZingChart 团队的成员。

第一个问题是

step:'1hour'

该字符串值被我们的库解释为值 0。这是因为字符串“1hour”不匹配我们的任何关键字，也不计算为数字类型。我们不是简单地使用 parseInt，所以它的计算结果不是 1。

如果您想要一个小时的步数，您可以以毫秒为单位计算步数。这记录在我们的 scales page.

中

step:3600000

为了显示比例值，我们有一个 tokens 列表，允许您将比例值添加到工具提示中。在您的 customFn.formatTooltip 中，您将添加这一行。

  ...
  tooltipText = tooltipText + "Value: " + p['data-customValue'];
  tooltipText += '<br> %vv'

%vv 在我们的 tokens 列表中，它将从 y 轴上获取转换后的值。如果你这样做 %vt 它会给你毫秒值。

在 Zingchart 中定义 'step' 属性会导致图形不可用

Defining 'step' attribute in Zingchart renders the graph unusable

javascript

charts

plot

zingchart