个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-29 10:08:40 24 4
gpt4 key购买 nike

场景:

我能够使用 Zingchart 获取状态图，使用 stacked hbar 并绘制元素状态不变的数据间隔: Zingchart graph OK

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

问题:

我无法增加y 轴 中刻度 的数量(这是一个堆叠的hbar 图，所以通常x 轴 实际上是 y 轴)。

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

Zingchart graph definitely not OK

问题:

我做错了什么？我想要:

  • 在时间轴上有更多的时间引用。
  • 或者(这可能是另一个问题)能够知道鼠标悬停(在工具提示中？)我现在几点。由于我正在绘制时间增量，因此我丢失了关于状态变化发生位置的实际时间。在这种特殊情况下有没有直接的方法来做到这一点？或者我是否必须携带另一个 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 工作正常。但我更愿意以正常的方式进行我的步数，比如每小时。

注意:只是为了提供更多上下文，这个问题是另一个 previous 问题的延续。

最佳答案

完全披露，我是 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，它将为您提供毫秒值。

关于javascript - 在 Zingchart 中定义 'step' 属性会导致图形不可用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38033612/

24 4 0
文章推荐： Java - "varible name"无法解析为变量 - 我找不到我的错误所在
文章推荐： 设置日期为 30/12 或 31/12 时的 Java 日历错误
文章推荐： java - @Inject 和@ValueMapValue 注解的区别
文章推荐： java - 堆已满 com.mysql.jdbc.JDBC4Connection
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com