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 я наблюдал ту же проблему разрыва выходных (см. Ниже)
Я не удосужился исследовать, почему, и это, вероятно, из-за того, что он основан на D3.js, как и plotly.js. Если вы считаете, что разрыв между датой и временем можно устранить с помощью C3.js, пожалуйста, не стесняйтесь поделиться своим решением.
Highcharts
Наконец-то я наткнулся на семейство Highxxxxx библиотеки графиков, и на первый взгляд она выглядела так красиво и предлагала все необходимые функции. Я попробовал Highchart, и у меня возникла та же проблема с разрывом выходных
Ну, я начал думать, что единственным решением является NOT TO PLOT datetime в x-axis вообще и каким-то образом показывать дату и время в tooltip, и это, кажется, делает работу, как показано ниже
Но, будучи слишком упрямым, чтобы бросить, я продолжил свое исследование. Я действительно хотел, чтобы графики делались как TradingView и другие виды визуализации.
Я решил провести еще какое-то исследование, и мало что я знал, что я был так близок к решению той же самой библиотеки графиков Highcharts, и она называется HighStock
Highstock of 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 для финансовых данных.
библиотеки я не пробовал
Я исследовал, но не пробовал следующие библиотеки диаграмм
- Google чарты (по неизвестным причинам это не так)
- Чартист (не видел много типов диаграмм, связанных с интерактивностью и финансами, и примеры
- Chartjs (так же, как Chartist)
- TradingView (я сдаюсь после прочтения их условий использования - странная оговорка, моя точка зрения)
- Большинство других, которым не хватало уровня документации, интерактивности, финансовых диаграмм, таких как
Plotly и Highcharts.
Заключительная мысль
Я нашел Highcharts, чтобы быть
- Хорошо задокументировано
- Тонна примеров jsfiddles вокруг
- Много полезных ответов SO
- Довольно и очень функционально
- Много опций
- Простота в использовании
Подобные вопросы SO, относящиеся к gaps
Как я могу скрыть пробелы в данных в заговоре?
HighCharts datetime xAxis без пропущенных значений (выходные дни) (Highcharts)
Устранить разрывы выходных в gnuplot для графика подсвечников (график подсвечников, оружейный график)
Как убрать пробелы в диаграмме временных рядов C3? (c3 / d3 - скрипты не работают, поэтому трудно найти решение)
Как удалить выходные дни с оси x на графике dc js (c3.js - разрыв - это некоторый разрыв)