Question

情境：

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

但是，我想在轴上提供更多分辨率来提供时间。

问题：

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

如果我在step:"1hour",字段中引入scaleY，我会回到第0纪元，这就是我所获得的：

问题：

我做错了什么？我想要：

在时间轴上有更多时间参考。
或者（这可能是另一个问题）能够在我什么时候知道鼠标悬停（在工具提示中？）。由于我正在绘制时间增量，因此在状态发生变化的地方丢失了实际时间。在这种特殊情况下，有没有直接的方法来做到这一点？或者我是否必须携带另一个data-customValue作为间隔开始/结束的实际日期？

在代码中，我从纪元0跳到到我开始拥有数据的时间，并定义minValue绘制为第一个纪元我有数据减去一秒。这是工作代码（未定义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工作正常。但我更喜欢以正常方式完成我的步骤，例如每小时。

注意：只是为了提供更多上下文，这个问题是这个问题的继续{/ 3}}。

Answer 1

完全披露，我是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它会给你毫秒值。

定义＆＃39;步骤＆＃39; Zingchart中的属性使图形无法使用

1 个答案: