Проблема состоит в том, чтобы показать две серии, для скорректированного максимума и скорректированного минимума, на графике High-Stocks старших графиков, подобном следующему, который показывает только одну серию:
Ссылки на похожие вопросы Хайстока и JSFiddle:
https://forum.highcharts.com/viewtopic.php?f=12&t=40964&p=142595&hilit=multiple+series#p142595
https://jsfiddle.net/BlackLabel/xqgv2b4k/
Ниже приведены мои рабочие файлы, использованные для построения приведенного выше графика.
sample.csv (вход)
DATE,ADJ_HIGH,ADJ_LOW
2018-04-27,164.33,160.630
2018-04-30,167.26,161.840
2018-05-01,169.20,165.270
2018-05-02,177.75,173.800
2018-05-03,177.50,174.441
csv_to_json_testing.py
import numpy as np
import pandas as pd
input_file = 'sample.csv'
df = pd.read_csv(input_file, usecols=[0,1,2], parse_dates=['DATE'], date_parser = pd.to_datetime) # keep_default_na = False
with open('overflow.txt', 'w') as f:
df['DATE'] = df['DATE'].values.astype(np.int64) // 10 ** 6
print(file=f)
print('DATE, ADJ_HIGH (json)', file=f)
print(file=f)
print(df[['DATE','ADJ_HIGH']].tail(5).to_json(orient='values'), file=f)
print(file=f)
print('DATE, ADJ_LOW (json)', file=f)
print(file=f)
print(df[['DATE','ADJ_LOW']].tail(5).to_json(orient='values'), file=f)
print(file=f)
print('DATE, ADJ_HIGH, ADJ_LOW (json)', file=f)
print(file=f)
print(df[['DATE','ADJ_HIGH','ADJ_LOW']].tail(5).to_json(orient='values'), file=f)
overflow.txt (вывод)
DATE, ADJ_HIGH (json)
[[1524787200000,164.33],[1525046400000,167.26],[1525132800000,169.2],[1525219200000,177.75],[1525305600000,177.5]]
DATE, ADJ_LOW (json)
[[1524787200000,160.63],[1525046400000,161.84],[1525132800000,165.27],[1525219200000,173.8],[1525305600000,174.441]]
DATE, ADJ_HIGH, ADJ_LOW (json)
[[1524787200000,164.33,160.63],[1525046400000,167.26,161.84],[1525132800000,169.2,165.27],[1525219200000,177.75,173.8],[1525305600000,177.5,174.441]]
sample.json (DATE, ADJ_HIGH)
[[1524787200000,164.33],[1525046400000,167.26],[1525132800000,169.2],[1525219200000,177.75],[1525305600000,177.5]]
highstock_test.html
<html>
<head>
<title>
Chart
</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
<script type="text/javascript">
$.getJSON('sample.json', function (data) {
// Create the chart
Highcharts.stockChart('container', {
rangeSelector: {
selected: 1
},
title: {
text: 'XYZ Stock Price'
},
series: [{
name: 'XYZ',
data: data,
tooltip: {
valueDecimals: 2
}
}]
});
});
</script>
</head>
<body>
<div id="container" style="width: 400px; height: 350px; margin: 0 auto"></div>
</body>
</html>
Когда я сохраняю sample.json и highstock_test.html в папке, а затем открываю html-файл в браузере, я получаю приведенный выше график high -tock для одной серии. Моя задача состоит в том, чтобы правильно заполнить и отформатировать sample.json данными DATE, ADJ_HIGH и ADJ_LOW, а также отредактировать highstock_test.html, чтобы график правильно отображал две серии вместо одной. Хотелось бы использовать метод, который проще всего понять, и который также может быть адаптирован для обслуживания диаграмм из колбы.