使用dateTime轴在任何图表线图上显示空数据点

时间:2018-03-05 15:02:07

标签: anychart

我有一个简单的数据集,其中包含时间序列数据点,我希望以每秒精度绘制。但数据是股票数据,因此不是每个点都代表价格变化。

这是一个价格为14:08, 14:09, 14:10 ... 14:15

的简单示例

https://playground.anychart.com/ZIT0QuAF/1

是否可以显示数据点之间传递的间隙/时间,可以是空格,也可能是每秒的x轴更好,只是连接点的延长线(可能是点线或不同的颜色)。

谢谢。

1 个答案:

答案 0 :(得分:1)

现在我看到了你的要求。你可以轻松实现这一目标。默认情况下,如您提供的示例中所示,您使用基于序数的比例。为了更好地说明在股票代码点之间传递了一些时间,您应该使用基于分散的比例。只需在代码中使用以下行:

chart.xScale('scatter');

现在所有点都严格遵循时间坐标,并显示所有间隙。此外,所有点都用虚线连接。请检查下面的示例



anychart.onDocumentReady(function() {

  // create data table on loaded data
  var table = anychart.data.table("epoch");

  table.addData([
  {
    last: 0.00000462,
    epoch: 1520260206263,
    vol: 0,
    volBase: 0,
    prcnt: 0,
    volDiff: 0,
    percentFromStart: 0.00000000
  },
  {
    last: 0.00000558,
    epoch: 1520260207391,
    vol: 0,
    volBase: 0,
    prcnt: -17.20430108,
    volDiff: NaN,
    percentFromStart: 20.77922078
  },
  {
    last: 0.00000585,
    epoch: 1520260208131,
    vol: 0,
    volBase: 0,
    prcnt: -4.61538462,
    volDiff: NaN,
    percentFromStart: 26.62337662
  },
  {
    last: 0.00000680,
    epoch: 1520260209293,
    vol: 0,
    volBase: 0,
    prcnt: -13.97058824,
    volDiff: NaN,
    percentFromStart: 47.18614719
  },
  {
    last: 0.00000693,
    epoch: 1520260210752,
    vol: 0,
    volBase: 0,
    prcnt: -1.87590188,
    volDiff: NaN,
    percentFromStart: 50.00000000
  },
  {
    last: 0.00000657,
    epoch: 1520260215326,
    vol: 0,
    volBase: 0,
    prcnt: 5.47945205,
    volDiff: NaN,
    percentFromStart: 42.20779221
  },
  {
    last: 0.00000700,
    epoch: 1520260225028,
    vol: 0,
    volBase: 0,
    prcnt: -6.14285714,
    volDiff: NaN,
    percentFromStart: 51.51515152
  },
  {
    last: 0.00000657,
    epoch: 1520260239317,
    vol: 0,
    volBase: 0,
    prcnt: 6.54490107,
    volDiff: NaN,
    percentFromStart: 42.20779221
  },
  {
    last: 0.00000624,
    epoch: 1520260240762,
    vol: 0,
    volBase: 0,
    prcnt: 5.28846154,
    volDiff: NaN,
    percentFromStart: 35.06493506
  },
  {
    last: 0.00000723,
    epoch: 1520260244015,
    vol: 0,
    volBase: 0,
    prcnt: -13.69294606,
    volDiff: NaN,
    percentFromStart: 56.49350649
  },
  {
    last: 0.00000740,
    epoch: 1520260245557,
    vol: 0,
    volBase: 0,
    prcnt: -2.29729730,
    volDiff: NaN,
    percentFromStart: 60.17316017
  },
  {
    last: 0.00000740,
    epoch: 1520260247146,
    vol: 0,
    volBase: 0,
    prcnt: 0.00000000,
    volDiff: NaN,
    percentFromStart: 60.17316017
  },
  {
    last: 0.00000740,
    epoch: 1520260258519,
    vol: 0,
    volBase: 0,
    prcnt: 0.00000000,
    volDiff: NaN,
    percentFromStart: 60.17316017
  },
  {
    last: 0.00000740,
    epoch: 1520260261733,
    vol: 0,
    volBase: 0,
    prcnt: 0.00000000,
    volDiff: NaN,
    percentFromStart: 60.17316017
  },
  {
    last: 0.00000713,
    epoch: 1520260262192,
    vol: 0,
    volBase: 0,
    prcnt: 3.78681627,
    volDiff: NaN,
    percentFromStart: 54.32900433
  },
  {
    last: 0.00000700,
    epoch: 1520260263087,
    vol: 0,
    volBase: 0,
    prcnt: 1.85714286,
    volDiff: NaN,
    percentFromStart: 51.51515152
  },
  {
    last: 0.00000657,
    epoch: 1520260264653,
    vol: 0,
    volBase: 0,
    prcnt: 6.54490107,
    volDiff: NaN,
    percentFromStart: 42.20779221
  },
  {
    last: 0.00000614,
    epoch: 1520260288009,
    vol: 0,
    volBase: 0,
    prcnt: 7.00325733,
    volDiff: NaN,
    percentFromStart: 32.90043290
  },
  {
    last: 0.00000614,
    epoch: 1520260295191,
    vol: 0,
    volBase: 0,
    prcnt: 0.00000000,
    volDiff: NaN,
    percentFromStart: 32.90043290
  },
  {
    last: 0.00000740,
    epoch: 1520260296127,
    vol: 0,
    volBase: 0,
    prcnt: -17.02702703,
    volDiff: NaN,
    percentFromStart: 60.17316017
  },
  {
    last: 0.00000749,
    epoch: 1520260299736,
    vol: 0,
    volBase: 0,
    prcnt: -1.20160214,
    volDiff: NaN,
    percentFromStart: 62.12121212
  },
  {
    last: 0.00000749,
    epoch: 1520260302084,
    vol: 0,
    volBase: 0,
    prcnt: 0.00000000,
    volDiff: NaN,
    percentFromStart: 62.12121212
  },
  {
    last: 0.00000562,
    epoch: 1520260304974,
    vol: 0,
    volBase: 0,
    prcnt: 33.27402135,
    volDiff: NaN,
    percentFromStart: 21.64502165
  },
  {
    last: 0.00000375,
    epoch: 1520260323816,
    vol: 0,
    volBase: 0,
    prcnt: 49.86666667,
    volDiff: NaN,
    percentFromStart: -18.83116883
  },
  {
    last: 0.00000749,
    epoch: 1520260327149,
    vol: 0,
    volBase: 0,
    prcnt: -49.93324433,
    volDiff: NaN,
    percentFromStart: 62.12121212
  },
  {
    last: 0.00000749,
    epoch: 1520260328543,
    vol: 0,
    volBase: 0,
    prcnt: 0.00000000,
    volDiff: NaN,
    percentFromStart: 62.12121212
  },
  {
    last: 0.00000749,
    epoch: 1520260335547,
    vol: 0,
    volBase: 0,
    prcnt: 0.00000000,
    volDiff: NaN,
    percentFromStart: 62.12121212
  },
  {
    last: 0.00000749,
    epoch: 1520260338101,
    vol: 0,
    volBase: 0,
    prcnt: 0.00000000,
    volDiff: NaN,
    percentFromStart: 62.12121212
  }
]);

  chart = anychart.stock();
  chart.xScale('scatter');

    var mappingLastPrice = table.mapAs({
    'value': "last"
  });
  
  var series1 = chart.plot(0).line(mappingLastPrice);
  series1.stroke('red','1', '2 10');
  series1.markers(true);
  series1.markers().fill('blue');
  series1.name("Last Price");

  chart.container('container').draw();
});

html, body, #container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

<script src="https://cdn.anychart.com/releases/8.1.0/js/anychart-base.min.js"></script>
 <script src="https://cdn.anychart.com/releases/8.1.0/js/anychart-stock.min.js"></script>
 <script src="https://cdn.anychart.com/releases/8.1.0/js/anychart-ui.min.js"></script>
 <script src="https://cdn.anychart.com/releases/8.1.0/js/anychart-exports.min.js"></script>
<link href="https://cdn.anychart.com/releases/8.1.0/css/anychart-ui.min.css" rel="stylesheet"/>
<div id="container"></div>
&#13;
&#13;
&#13;