如何从财务图表的X轴上消除周末日期时间上的差距？

时间：2018-07-04 20:10:48

标签： d3.js charts highcharts plotly highstock

我有一个用例，其中我以Forex的形式绘制ask and bid数据并将其绘制在图形上，这是基于minute, hour or day candlesticks的，我只绘制了{{1 closing的}}值作为bid and ask。

问题

从spline到Forex，我正在使用其Friday 8pm数据馈送的端点不可用。假设我有以下用例

  • 一次在图表上绘制200个数据点（即每小时的蜡烛图），逐步淘汰最旧的新蜡烛图并绘制最新的蜡烛图。
  • X轴是Sunday 9pm中数据点的datetime
  • Y轴是要价和出价
  • 图表一次显示UTC ISO Format

当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 左右），所有内容都会被压缩以适应图的拉伸部分，如下所示（使用plotly.js）

Using PlotlyJS Library

大多数情况下，财务图表无法显示差距。例如，查看TradingView交互式图表，您将看到47-49 hours的以下内容

enter image description here

如果您知道如何使用开源图表库（weekend除外）解决此问题，请分享您的解决方案。

5 个答案:

答案 0 :(得分：3)

TL; DR

根据我的发现，您可以使用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（论坛）

     

https://github.com/plotly/plotly.js/issues/1382（锁定的github线程）

     

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

根据上面的Github问题链接，目前无法在datetime上处理x-axis的方式。有解决方法（如上面的第3个链接），但是，我尝试了一些方法，但是它要么无效，要么丢失了一些信息。

我得出的结论是，尽管plotly是一个很棒的库，但在这种情况下它根本无法帮助我。如果您认为可以，请分享您的解决方案:)

C3.js

在对制图库进行了更多研究之后，我尝试了C3.js，并在datetime的x轴上编辑了他们的实时演示示例之后，观察到了相同的周末间隙问题（参见下文）

C3.js

我没有去研究为什么，那可能是因为像D3.js一样基于plotly.js。如果您认为C3.js可以解决日期时间差异，请随时分享您的解决方案。

Highcharts

我终于遇到了Highxxxxx图形库家族，乍一看它看起来非常漂亮，并提供了我想要的所有功能。我尝试了Highchart，并且遇到了相同的周末空缺问题

Highcharts attempt

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

Highcharts with x-axis

但是，由于太固执，我放弃了我的研究。我真的很想完成像TradingView这样的图表绘制和其他股票可视化。

我决定进行更多研究，但几乎不知道我是如此接近采用相同的图表库Highcharts的解决方案，它被称为HighStock

高位图表的高位

HighStock默认情况下会处理这些差距，如下所示

HighStock of Highcharts

我使用了以下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是

  1. 有据可查
  2. 围绕
    3. 的大量jsfiddles示例
  3. 很多有用的SO答案
  4. 漂亮又实用
  5. 许多选项
  6. 易于使用

与gaps相关的类似SO问题

How can I hide data gaps in plotly?

HighCharts datetime xAxis without missing values (weekends)（图表）

Remove weekend gaps in gnuplot for candlestick chart（烛台图，炮台图）

How to remove gaps in C3 timeseries chart?（c3 / d3-小提琴无法正常工作，因此很难找到解决方法）

How to remove weekends dates from x axis in dc js chart（c3.js-差距有些差距）

答案 1 :(得分：2)

Plotly现在支持在距离突破的帮助下将周末和节假日隐藏在图表中。检查此链接：https://plotly.com/python/time-series/转到“隐藏周末和假期”部分

下面是从此链接复制的部分，示例适用于plotly.express，但也适用于plotly.graph_objects

隐藏周末和假期 date类型的x轴和y轴上可用的rangebreaks属性可用于隐藏某些时间段。在下面的示例中，我们显示了两个图表：一个处于默认模式下以显示数据中的差距，另一个在其中隐藏周末和节假日以显示不间断的交易历史。请注意，12月21日和1月4日的网格线之间的间隙较小，其中删除了假日。请参阅参考资料以获取更多选项：https://plotly.com/python/reference/#layout-xaxis-rangebreaks 

_id

enter image description here 默认显示为空白 

people array

enter image description here

答案 2 :(得分：1)

使用类别作为xaxis类型对我来说效果很好（请注意go.Layout对象）：

    import plotly.graph_objects as go

    layout = go.Layout(
        xaxis=dict(
            type='category',
        )
    )

    fig = go.Figure(data=[go.Candlestick(x=self.price_df.index.to_series(),
                                         open=self.price_df[e.OHLCV.OPEN.value],
                                         high=self.price_df[e.OHLCV.HIGH.value],
                                         low=self.price_df[e.OHLCV.LOW.value],
                                         close=self.price_df[e.OHLCV.CLOSE.value])],
                    layout=layout)

    fig.show()

答案 3 :(得分：1)

根据documentation

尝试将其添加到fig.show()

之前 
fig.update_xaxes(
    rangebreaks=[
        dict(bounds=["sat", "sun"]), #hide weekends
    ]
)

或

fig.layout.xaxis.type = 'category'

答案 4 :(得分：1)

首先，无需退出Plotly。范围中断的使用确实是要使用的工具，但这只是它的一方面。我之所以这样说，是因为对于股票数据而言，与值相比，边界是不切实际的，但是您将指定每年许多假期的日期，并且大多数日期会从一年改为另一年。因此，请使用范围中断的值，并向其提供正在加载的CSV文件中没有的每个日期的列表。如果您需要更大的努力来解决此问题，我的意思是将“日期”列放在一边，遍历它，并附加另一个列表中没有的日期。然后，您可以 fig.update_xaxes（rangebreaks = [dict（values = mylistofdates）]） 希望这能带您回到Plotly！

相关问题
最新问题