d3.js - 如何从财务图表的 x 轴中删除周末日期时间间隔？

Question

我有一个用例，我拉动并绘制 Forex ask and bid 形式的数据在图表上，这是基于 minute, hour or day candlesticks我只是在绘制 closing bid and ask 的值作为 spline .

问题

我使用的端点Forex Friday 8pm 不提供数据馈送至Sunday 9pm .假设我有以下用例

一次在图表上绘制 200 个数据点(即每小时蜡烛)，在新蜡烛上淘汰最旧的并绘制最新的

X 轴是数据点的 datetime在 UTC ISO Format

Y 轴是买价和卖价的值

图表一次显示4.1 days worth of hourly candle

图为pretty和 smooth当datetime在 x-axis没有任何空隙。蜡烛时间戳以以下形式返回

2018-06-29T16:00:00.000000000Z
2018-06-29T17:00:00.000000000Z
2018-06-29T19:00:00.000000000Z
2018-06-29T20:00:00.000000000Z (Friday last candle 8pm)
2018-07-01T21:00:00.000000000Z (Sunday first candle 9pm) 
2018-07-01T22:00:00.000000000Z
2018-07-01T23:00:00.000000000Z
2018-07-02T00:00:00.000000000Z

只要有间隙(大约 47-49 hours )，所有内容都会被压缩以适应图形的拉伸(stretch)部分，如下所示(使用 plotly.js )



大多数情况下，财务图表不会显示差距。例如，查看 TradingView交互式图表，您将看到 weekend 的以下内容



如果您知道如何使用开源图表库(不包括 TradingView)解决此问题，请分享您的解决方案。

Answer 1

TL;博士
根据我的发现，您可以使用 HighStock 排除差距的 Highcharts图书馆。 Highcharts 是开源的，仅可免费用于 Non-commercial使用，更多详情见highcharts licensing
plotly .js
我最初是从 plotly.js 开始的。因为老实说，它确实是一个非常好的图表库。在我遇到 datetime gap 之后x-axis 上的问题(参见相关截图)我研究了解决方案并遇到了以下问题

https://community.plot.ly/t/tickformat-without-weekends/1286/5 (forum)

https://github.com/plotly/plotly.js/issues/1382 (locked github thread)

https://community.plot.ly/t/x-axis-without-weekends/1091/2

根据 Github上面的问题链接，目前无法实现 datetime在 x-axis 上处理.有解决方法(如上面的第 3 个链接)，但是，我尝试了一些，但它要么不起作用，要么丢失了一些信息。
我得出的结论是，即使 plotly是一个很棒的图书馆，在这种情况下它根本无法帮助我。如果您认为可以，请分享您的解决方案:)
C3.js
在对图表库进行了更多研究后，我给出了 C3.js尝试使用 datetime 编辑他们的现场演示示例后对于 x 轴，我观察到相同的周末间隙问题(见下文)

我没有费心去研究原因，这可能是因为基于 D3.js就像 plotly.js .如果您认为可以使用 C3.js 处理日期时间间隔那么请随时分享您的解决方案。
海图
我终于遇到了Highxxxxx的家人图表库，乍一看它看起来很漂亮，并提供了我想要的所有功能。我试过Highchart我遇到了同样的周末差距问题

好吧，我开始认为唯一的解决方案是 NOT TO PLOT datetime在 x-axis并且以某种方式在 tooltip 中显示日期时间这似乎可以完成如下所示的工作

但是，由于太固执而无法放弃，我继续研究。我真的很想像 TradingView 那样完成图表。和其他股票可视化。
我决定做更多的研究，但我几乎不知道我是如此接近同一个图表库 Highcharts 的解决方案。它被称为 HighStockHighcharts的Highstock
HighStock默认情况下会处理如下所示的间隙

我使用了以下一段 Javascript

  Highcharts.setOptions({
    global: {
      useUTC: false
    }
  });

  Highcharts.StockChart('chart', {
    chart: {
        type: 'spline',
        events: {
            load: function () {
              console.log('Highcharts is Loaded! Creating a reference to Chart dom.')

              //store a reference to the chart to update the data series
              var index=$("#chart").data('highchartsChart');
              highchartRef = Highcharts.charts[index]; //global var

              //Initiating the data pull here
            }
        }
    },
    title: {
        text: 'Chart title'
    },
    series: [
      {
        name: 'Ask',
        data: [],
        tooltip: {
            valueDecimals: 7
        },
        marker: {
          enabled: true
        }
      },
      {
        name: 'Bid',
        data: [],
        tooltip: {
            valueDecimals: 7
        },
        marker: {
          enabled: true
        }
      }
    ]
  });

你有它，一个无缝的(不确定它是否是一个真实的单词)财务图表，datetime财务数据的 x 轴。
我没有尝试过的库
我已经研究过，但没有尝试以下图表库

Google 图表(不知为何感觉不对)

Chartist(没有看到太多与交互性和财务相关的图表类型和示例

Chartjs (同 Chartist)

TradingView(我在阅读他们的使用条款后放弃 - 奇怪的条款，我的观点)

大多数其他缺乏文档级别、交互性、与财务相关的图表，如 Plotly和 Highcharts .

最后的想法
我找到了Highcharts成为

有据可查

周围的大量 jsfiddles 示例

很多有用的 SO 答案

漂亮又实用

多种选择

易于使用

与 gaps 相关的类似 SO 问题
How can I hide data gaps in plotly?
HighCharts datetime xAxis without missing values (weekends) (Highcharts)
Remove weekend gaps in gnuplot for candlestick chart (烛台图，枪图)
How to remove gaps in C3 timeseries chart? (c3/d3 - fiddle 不工作，所以很难看到解决方案)
How to remove weekends dates from x axis in dc js chart (c3.js - 差距是一些差距)