时间戳

首页 > 解决方案 > c2.js 散点图不使用新的 x 轴值

javascript - c2.js 散点图不使用新的 x 轴值

问题描述

如果这个问题有一个明显的答案，请原谅我。

我正在使用 c3.js 在同一张图上绘制两组数据。数据恰好是时间序列。我制作了第一个图（c3.generate），它看起来不错。

然而，在第二部分中，似乎 c3.load 完全忽略了 x 轴数据，并将 y 值绘制在与前一个图相同的 x 值处。

为了让我可以看到发生了什么，我在超时后这样做了，以便在两个情节之间暂停。

起初我认为这可能与我的时间表示有关，但无论我使用 Linux 纪元时间还是时间字符串，我都会得到相同的结果。您可以通过取消注释 timeStamp 和 timeStamp2 的字符串版本并注释掉 Linux epoch 来看到这一点。

我的猜测是我误解了 load 方法在散点图中的工作原理，但任何额外的见解都会受到赞赏。

谢谢，

保罗

***
  <!-- read in scripts in javascript -->
  <script src="c3/c3.min.js"></script>
  <script src="d3/d3.min.js"></script>
  <script>
    /*
     The goal is to draw/redraw the same timeSeries graph 2 times:
      First: with one set of data, which increases linearly in time
      Second: adding a second set of data, which is offset in time from the first, 
              but also increases linearly
    */

    //fill array with data
    timeStamp = ["timeStamp",
         "2020-04-14 12:00:00", 
         "2020-04-14 13:00:00", 
         "2020-04-14 14:00:00", 
         "2020-04-14 15:00:00", 
         "2020-04-14 16:00:00", 
         "2020-04-14 17:00:00", 
         "2020-04-14 18:00:00", 
         "2020-04-14 19:00:00", 
         "2020-04-14 20:00:00"
        ];
    
    /*
     timeStamp = ["timeStamp",
         1586887200000,
         1586890800000,
         1586894400000,
         1586898000000,
         1586901600000,
         1586905200000,
         1586908800000,
         1586912400000
        ];
    */
    yValue = ["yValue", 1, 2, 3, 4, 5, 6, 7, 8, 9];
    //load new data into chart  
    
    //declare and draw first chart
    var yValueChart = c3.generate({
    bindto: '#yValue',
    axis: {
        x : {
        type: 'timeseries',
        tick: { format: '%Y-%m-%d %H:%M'}
        }
    },
    data: {
        x : 'timeStamp',
        xFormat : '%Y-%m-%d %H:%M:%S',
        columns: [timeStamp,
              yValue
             ],
        type : 'scatter'
    }
    });
    
    //wait a bit more and draw second chart
    setTimeout(function() {
    //fill array with data
    
    timeStamp2 = ["timeStamp2",
             "2020-04-14 12:30:00", 
             "2020-04-14 13:30:00", 
             "2020-04-14 14:30:00", 
             "2020-04-14 15:30:00", 
             "2020-04-14 16:30:00", 
             "2020-04-14 17:30:00", 
             "2020-04-14 18:30:00", 
             "2020-04-14 19:30:00", 
             "2020-04-14 20:30:00"
             ];
    /*
     timeStamp2 = ["timeStamp2",
             1586889000000,
         1586892600000,
         1586896200000,
         1586899800000,
         1586903400000,
         1586907000000,
         1586910600000,
         1586914200000
        ];
    */
    yValue = ["yValue2", 1.2, 2.2, 3.2, 4.2, 5.2, 6.2, 7.2, 8.2, 9.2];
    //load new data into chart
    yValueChart.load({
        xs : {
        yValue2 : 'timeStamp2'
        }, 
        columns: [
        timeStamp2,
        yValue
        ]
    });
    //why is timeStamp2 ignored?
    }, 3000);
  </script>
***

标签： javascriptscatter-plotc3.js

解决方案

问题是我在调用 c3.generate 时没有正确指定参数。那里有正确的代码

...

var chart = c3.generate({
bindto: '#yValue',
axis : {
        x: {
    type : 'timeseries',
    tick : { format: '%Y-%m-%d %H:%M' }
        }
},
data: {
        xs: {
    yValue: 'timeStamp'
        },
        // iris data from R
        columns: [
    timeStamp,
    yValue 
        ],
        type: 'scatter'
}
});

...

主要区别在于添加了

...

xs : {
yValue : 'timeStamp'
}

...

保罗

推荐阅读