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

Question

我有一个用例，我在图表上Forex以 的形式提取和绘制数据ask and bid，这是基于minute, hour or day candlesticks并且我只绘制作为 a的closing值。bid and askspline

问题

我正在使用其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），一切都会被压缩以适应图形的拉伸部分，如下所示（使用plotly.js）

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

如果您知道如何使用开源图表库（不包括TradingView）来解决这个问题，请分享您的解决方案。

Answer 1

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

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

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

import plotly.express as px
import pandas as pd
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv')

fig = px.scatter(df, x='Date', y='AAPL.High', range_x=['2015-12-01', '2016-01-15'],
                 title="Default Display with Gaps")
fig.show()

无间隙显示

import plotly.express as px
import pandas as pd
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv')

fig = px.scatter(df, x='Date', y='AAPL.High', range_x=['2015-12-01', '2016-01-15'],
                 title="Hide Gaps with rangebreaks")
fig.update_xaxes(
    rangebreaks=[
        dict(bounds=["sat", "mon"]), #hide weekends
        dict(values=["2015-12-25", "2016-01-01"])  # hide Christmas and New Year's
    ]
)
fig.show()

Answer 2

TL; 博士

根据我的调查结果，可以排除使用空白HighStock的Highcharts图书馆。Highcharts 是开源的，只能免费Non-commercial使用，更多详细信息请参阅highcharts 许可

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. 有解决方法（如上面的第三个链接），但是，我尝试了一些方法，但它要么不起作用，要么丢失了一些信息。

我得出的结论是，即使plotly是一个很棒的图书馆，在这种情况下它也无法帮助我。如果您认为确实如此，请分享您的解决方案:)

C3.js

在对图表库进行了更多研究之后，我尝试了C3.js，在使用datetimex 轴编辑他们的现场演示示例后，我观察到了相同的周末间隙问题（见下文）

我没有费心研究为什么，这可能是因为基于D3.js就像plotly.js. 如果您认为可以处理日期时间间隔，C3.js请随时分享您的解决方案。

高图

我终于遇到了Highxxxxx图表库系列，乍一看它看起来很漂亮，并提供了我想要的所有功能。我试过了Highchart，我遇到了同样的周末间隔问题

好了，我开始想，唯一的解决办法就是NOT TO PLOT将datetime在x-axis所有并以某种方式显示日期时间tooltip，并且似乎做的工作，如下图所示

但是，因为太固执而无法放弃，我继续我的研究。我真的很想像TradingView其他股票可视化一样完成图表。

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

Highcharts 的 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 轴。

我没有尝试的图书馆

我已经研究过，但没有尝试以下图表库

• 谷歌图表（不知为何感觉不对）
• Chartist（没有看到太多交互性和财务相关的图表类型和示例
• Chartjs（与 Chartist 相同）
• TradingView（我在阅读他们的使用条款后放弃 - 奇怪的条款，我的观点）
• 大多数其他人缺乏文档水平、交互性、与财务相关的图表，如Plotly和Highcharts。

最后的想法

我发现Highcharts是

1. 有据可查
2. 大量 jsfiddles 示例
3. 很多有用的SO答案
4. 漂亮而且非常实用
5. 很多选择
6. 便于使用

类似的问题 gaps

如何隐藏数据空白？

HighCharts datetime xAxis 没有缺失值（周末）（Highcharts）

消除烛台图表 gnuplot 中的周末间隙（烛台图表，枪图）

如何消除 C3 时间序列图表中的空白？（c3/d3 - 小提琴不起作用，所以很难看到解决方案）

如何从 dc js 图表中的 x 轴删除周末日期（c3.js - 差距是一些差距）

Answer 3

根据文件

尝试在之前添加这个fig.show()

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

或者

fig.layout.xaxis.type = 'category'