如何从财务图表的X轴删除周末日期间隙?

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

https://github.com/plotly/plotly.js/issues/1382 (锁定的Github线程)

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

根据 Github 上面的问题链接,这是目前无法实现的 datetime 在上处理 X轴 .有一些解决方法(如上面的第三个链接),但是,我尝试了一些,要么没有成功,要么我丢失了一些信息。

我的结论是即使 plotly 是一个伟大的图书馆,在这种情况下它根本帮不了我。如果你认为是,请分享你的解决方案:)

C3.js公司

经过对图表库的进一步研究,我给出了 C3.js 尝试编辑他们的现场演示示例后 日期时间 对于X轴I观察到相同的周末差距问题(见下文)

我没有费心研究原因,这可能是因为 D3.js 就像 plotly.js .如果你认为可以用 C3.js 那么请随意分享你的解决方案。

小精灵

我终于遇到了 Highxxxxx 图表库,乍一看,它看起来非常漂亮,提供了我想要的所有功能。我试过了 Highchart 我也有同样的周末间隙问题

我开始觉得唯一的解决办法就是 NOT TO PLOT 这个 日期时间 在里面 X轴 不管怎么说,把日期时间显示在 tooltip 它似乎完成了如下所示的工作

但是,我太固执了,不能放弃我的研究。我真的很想像 TradingView 以及其他股票可视化。

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

高股价

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
        }
      }
    ]
  });

给你,一张空白的(不确定是不是真的)财务图 日期时间 X轴的财务数据。

我没试过的图书馆

我已经研究过,但是,没有尝试下列图表库

• 谷歌排行榜(不知为什么,感觉不对)
• 图表列表(没有看到太多交互和财务相关的图表类型和示例
• ChartJS(与ChartIST相同)
• TradingView(我在阅读了他们的使用条款后放弃了——怪异条款,我的观点)
• 其他大多数缺乏文档、交互性、财务相关图表 Plotly 和 海图 是的。

最后的想法

我发现 海图 成为

1. 有据可查
2. 大量的jsfiddles示例
3. 很多有用的答案
4. 漂亮又实用
5. 多种选择
6. 使用方便

类似的问题 gaps

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-间隙是一些间隙)