D3.js 如何从财务图表的x轴上消除周末日期时间间隔？_D3.js_Charts_Highcharts_Plotly_Highstock

D3.js 如何从财务图表的x轴上消除周末日期时间间隔？

d3.js charts highcharts

D3.js 如何从财务图表的x轴上消除周末日期时间间隔？,d3.js,charts,highcharts,plotly,highstock,D3.js,Charts,Highcharts,Plotly,Highstock,我有一个用例，在这个用例中，我以询问和出价的形式在图形上拖拽和绘制外汇数据，这是基于分钟、小时或日烛台，我只是将出价和询问的收盘值绘制为样条曲线问题我正在使用其外汇数据馈送的端点在Friday 8pm到Sunday 9pm期间不可用。假设我有以下用例每次在图表上绘制200个数据点（即每小时蜡烛），在新蜡烛上逐步淘汰最旧的蜡烛，并绘制最新的蜡烛 X轴是UTC ISO格式中数据点的datetime Y轴是ask和bid的值图中每次显示的每小时蜡烛价值4.1天当x轴上的datetime没

我有一个用例，在这个用例中，我以

询问和出价

的形式在图形上拖拽和绘制

外汇

数据，这是基于

分钟、小时或日烛台

，我只是将

出价和询问

的

收盘

值绘制为

样条曲线

问题我正在使用其

外汇

数据馈送的端点在

Friday 8pm

到

Sunday 9pm

期间不可用。假设我有以下用例

每次在图表上绘制200个数据点（即每小时蜡烛），在新蜡烛上逐步淘汰最旧的蜡烛，并绘制最新的蜡烛

X轴是

UTC ISO格式中数据点的datetime


Y轴是ask和bid的值
图中每次显示的每小时蜡烛价值4.1天


当x轴上的datetime
没有任何间隙时，图形是pretty
和smooth
。蜡烛时间戳以以下形式返回
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小时
），所有内容都会被压缩，以适应下图所示的拉伸部分（使用）

大多数情况下，财务图表并未显示差距。例如，查看交互式图表，您将看到以下关于weekend


如果您知道如何使用开源图表库（不包括TradingView
）解决此问题，请分享您的解决方案 TL；博士
根据我的发现，您可以使用Highcharts
库的HighStock
排除这些差距。Highcharts是开源的，仅可免费用于非商业
用途，有关更多详细信息，请参阅
plotly.js
我一开始是用，因为老实说，它确实是一个非常好的图表库。在我遇到x轴上的datetime差距
问题（见相关屏幕截图）后，我研究了解决方案，并遇到了以下问题
（论坛）
（轮毂螺纹锁紧）

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

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

嗯，我开始认为唯一的解决办法是根本不在x轴中绘制datetime
，并以某种方式在工具提示中显示datetime，这似乎完成了如下所示的工作

但是，由于太固执而不肯放弃，我继续我的研究。我真的很想像TradingView
和其他股票可视化一样完成图表绘制
我决定做更多的研究，但我几乎不知道我如此接近于同一个图表库的解决方案Highcharts
，它被称为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轴的财务数据
我没有试过
我已经研究过了，但是没有尝试下面的图表库

谷歌图表（由于未知原因感觉不对劲）
ChartList（没有看到太多互动性和金融相关的图表类型和示例
Chartjs（与ChartList相同）
TradingView（在阅读了他们的使用条款后，我放弃了——奇怪的条款，我的观点）
大多数其他人缺乏文档、互动性和财务相关图表的水平，如Plotly
和Highcharts

最后的想法
我发现Highcharts
是
有据可查
大量的jsfiddle示例随处可见
很多有用的答案
漂亮又实用
许多选择
易于使用
与差距相关的类似SO问题

（高图）
（烛台图、枪图）
（c3/d3-小提琴不工作，因此很难找到解决方案）
（c3.js-差距是一些差距）
使用category作为xaxis类型对我来说非常合适（注意go.Layout对象）：
据
在fig.show（）之前尝试添加此项
或
Plotly现在支持在rangebreaks的帮助下在图表中隐藏周末和假日。检查此链接：转到“隐藏周末和假日”部分
下面是从该链接复制的部分，示例适用于plotly.express，但也适用于plotly.graph\u对象
隐藏周末和假日
日期类型的x轴和y轴上可用的rangebreaks属性可用于隐藏某些时间段
    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()

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

fig.layout.xaxis.type = 'category'

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()