为啥谷歌图表为烛台图提供不同的输出？
Posted
技术标签:
【中文标题】为啥谷歌图表为烛台图提供不同的输出？【英文标题】：Why google charts is giving different output for candlestick chart?为什么谷歌图表为烛台图提供不同的输出？ 【发布时间】：2021-08-21 09:55:32 【问题描述】：我正在尝试使用 Google 图表 (https://developers.google.com/chart/interactive/docs/gallery/candlestickchart) 创建烛台图。我使用烧瓶作为网站的后端，通过它我将数据发送到前端文件。对于数据，我使用这个 API (https://api.coingecko.com/api/v3/coins/bitcoin/ohlc?vs_currency=inr&days=1)，它返回一个按 [Timestamp, O, H, L, C] 顺序排列的值列表。 问题是，如果我尝试使用谷歌图表绘制图表，它会给出不同的结果（错误的结果），如果我使用 python 库“plotly”（https://plotly.com/python/candlestick-charts/），那么它会给出正确的结果。
这是用于谷歌图表的 html 文件。
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', 'packages':['corechart']);
google.charts.setOnLoadCallback(drawChart);
function drawChart()
var data = google.visualization.arrayToDataTable([['Wed 02 Jun 2021, 09:00:00', 2722124.01, 2715937.44, 2724963.79, 2715937.44], ['Wed 02 Jun 2021, 09:30:00', 2724925.52, 2722869.95, 2741614.77, 2741614.77], ['Wed 02 Jun 2021, 10:00:00', 2728093.17, 2728093.17, 2739286.03, 2728870.61], ['Wed 02 Jun 2021, 10:30:00', 2718010.94, 2718010.94, 2723819.08, 2723819.08], ['Wed 02 Jun 2021, 11:00:00', 2715955.36, 2714386.86, 2726607.96, 2722912.32], ['Wed 02 Jun 2021, 11:30:00', 2718954.63, 2703646.56, 2721812.79, 2713890.29], ['Wed 02 Jun 2021, 12:00:00', 2724179.1, 2716975.82, 2727909.36, 2716975.82], ['Wed 02 Jun 2021, 12:30:00', 2733265.55, 2720430.76, 2735768.63, 2720430.76], ['Wed 02 Jun 2021, 13:00:00', 2722923.22, 2722923.22, 2732580.23, 2732580.23], ['Wed 02 Jun 2021, 13:30:00', 2724002.8, 2710545.36, 2724002.8, 2719338.8], ['Wed 02 Jun 2021, 14:00:00', 2739133.43, 2731059.02, 2754969.91, 2731059.02], ['Wed 02 Jun 2021, 14:30:00', 2751213.2, 2736666.45, 2751213.2, 2739833.82], ['Wed 02 Jun 2021, 15:00:00', 2767686.26, 2756561.23, 2774474.36, 2756561.23], ['Wed 02 Jun 2021, 15:30:00', 2781821.89, 2770241.11, 2781821.89, 2770241.11], ['Wed 02 Jun 2021, 16:00:00', 2778208.11, 2771816.21, 2789036.17, 2789036.17], ['Wed 02 Jun 2021, 16:30:00', 2778498.24, 2772470.98, 2785340.44, 2779634.8], ['Wed 02 Jun 2021, 17:00:00', 2761537.09, 2761537.09, 2767345.21, 2766398.96], ['Wed 02 Jun 2021, 17:30:00', 2759776.49, 2759776.49, 2768620.54, 2768620.54], ['Wed 02 Jun 2021, 18:00:00', 2765960.61, 2760073.78, 2765960.61, 2760073.78], ['Wed 02 Jun 2021, 18:30:00', 2765294.19, 2765294.19, 2775429.22, 2773883.86], ['Wed 02 Jun 2021, 19:00:00', 2772384.85, 2769503.14, 2777937.64, 2773013.08], ['Wed 02 Jun 2021, 19:30:00', 2771195.19, 2771195.19, 2775149.0, 2773786.36], ['Wed 02 Jun 2021, 20:00:00', 2764098.74, 2762159.66, 2769495.29, 2766192.63], ['Wed 02 Jun 2021, 20:30:00', 2747561.81, 2747561.81, 2765450.28, 2765425.1], ['Wed 02 Jun 2021, 21:00:00', 2754400.7, 2747264.5, 2756122.77, 2748806.69], ['Wed 02 Jun 2021, 21:30:00', 2760469.64, 2757429.53, 2764665.97, 2757429.53], ['Wed 02 Jun 2021, 22:00:00', 2765606.06, 2760184.99, 2766780.81, 2760907.15], ['Wed 02 Jun 2021, 22:30:00', 2747866.33, 2747866.33, 2764107.47, 2760686.46], ['Wed 02 Jun 2021, 23:00:00', 2735295.37, 2732628.61, 2747115.27, 2747115.27], ['Wed 02 Jun 2021, 23:30:00', 2752856.01, 2737136.13, 2752856.01, 2738955.36], ['Thu 03 Jun 2021, 00:00:00', 2749601.05, 2745158.85, 2754505.03, 2754505.03], ['Thu 03 Jun 2021, 00:30:00', 2732568.83, 2732568.83, 2753258.94, 2743505.11], ['Thu 03 Jun 2021, 01:00:00', 2726132.45, 2726132.45, 2736916.06, 2736916.06], ['Thu 03 Jun 2021, 01:30:00', 2739768.06, 2729040.82, 2743387.0, 2729040.82], ['Thu 03 Jun 2021, 02:00:00', 2726328.34, 2726328.34, 2740275.97, 2740275.97], ['Thu 03 Jun 2021, 02:30:00', 2732910.03, 2719227.71, 2732910.03, 2719473.9], ['Thu 03 Jun 2021, 03:00:00', 2730708.05, 2726366.44, 2732652.42, 2728259.56], ['Thu 03 Jun 2021, 03:30:00', 2739529.01, 2731475.72, 2739529.01, 2731475.72], ['Thu 03 Jun 2021, 04:00:00', 2753921.86, 2737761.74, 2753921.86, 2742009.39], ['Thu 03 Jun 2021, 04:30:00', 2770448.22, 2756348.6, 2770448.22, 2756348.6], ['Thu 03 Jun 2021, 05:00:00', 2784105.66, 2770344.92, 2784105.66, 2770344.92], ['Thu 03 Jun 2021, 05:30:00', 2816044.22, 2788710.6, 2816044.22, 2788710.6], ['Thu 03 Jun 2021, 06:00:00', 2841610.6, 2803469.74, 2846321.98, 2806934.26], ['Thu 03 Jun 2021, 06:30:00', 2832951.67, 2829036.33, 2839367.17, 2839367.17], ['Thu 03 Jun 2021, 07:00:00', 2848184.09, 2831066.26, 2849151.77, 2831066.26], ['Thu 03 Jun 2021, 07:30:00', 2829755.06, 2829755.06, 2847820.09, 2847820.09], ['Thu 03 Jun 2021, 08:00:00', 2825071.67, 2824551.71, 2830912.41, 2824551.71], ['Thu 03 Jun 2021, 08:30:00', 2847684.7, 2830287.0, 2847684.7, 2830287.0], ['Thu 03 Jun 2021, 09:00:00', 2840999.2, 2840999.2, 2840999.2, 2840999.2]], true);
var options =
legend:'none',
candlestick:
fallingColor: strokeWidth: 0, fill: '#a52714' , // red
risingColor: strokeWidth: 0, fill: '#0f9d58' // green
;
var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
chart.draw(data, options);
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
这是谷歌图表的结果。
这是pyplot的代码：
import plotly.graph_objects as go
import requests
import json
from datetime import datetime
def convertToTime(timestamp):
timestamp /= 1000
return datetime.utcfromtimestamp(timestamp).strftime('%a %d %b %Y, %H:%M:%S')
response = requests.get('https://api.coingecko.com/api/v3/coins/bitcoin/ohlc?vs_currency=inr&days=1')
data = json.loads(response.content)
a = []
b = []
c = []
d = []
e = []
for x in data:
a.append(convertToTime(x[0]))
b.append(x[1])
c.append(x[2])
d.append(x[3])
e.append(x[4])
fig = go.Figure(data=[go.Candlestick(x=a,
open=b, high=c,
low=d, close=e)
])
fig.update_layout(xaxis_rangeslider_visible=False)
fig.show()
这是这样的结果：
我想在我的网站中使用谷歌图表。如何从谷歌图表中得到正确的结果？
【问题讨论】：
【参考方案1】：google图表的数据格式与plotly图表不同。 这些值的顺序不同。
对于情节，每一行应该是--> date, open, high, low, close
而对于谷歌 --> date, low, open, close, high
（见谷歌的data format）
请参阅以下工作 sn-p 以获取具有正确顺序的数据的 google 图表...
google.charts.load('current',
packages: ['corechart']
).then(function drawChart()
var rows = [['Wed 02 Jun 2021, 09:00:00', 2722124.01, 2715937.44, 2724963.79, 2715937.44], ['Wed 02 Jun 2021, 09:30:00', 2724925.52, 2722869.95, 2741614.77, 2741614.77], ['Wed 02 Jun 2021, 10:00:00', 2728093.17, 2728093.17, 2739286.03, 2728870.61], ['Wed 02 Jun 2021, 10:30:00', 2718010.94, 2718010.94, 2723819.08, 2723819.08], ['Wed 02 Jun 2021, 11:00:00', 2715955.36, 2714386.86, 2726607.96, 2722912.32], ['Wed 02 Jun 2021, 11:30:00', 2718954.63, 2703646.56, 2721812.79, 2713890.29], ['Wed 02 Jun 2021, 12:00:00', 2724179.1, 2716975.82, 2727909.36, 2716975.82], ['Wed 02 Jun 2021, 12:30:00', 2733265.55, 2720430.76, 2735768.63, 2720430.76], ['Wed 02 Jun 2021, 13:00:00', 2722923.22, 2722923.22, 2732580.23, 2732580.23], ['Wed 02 Jun 2021, 13:30:00', 2724002.8, 2710545.36, 2724002.8, 2719338.8], ['Wed 02 Jun 2021, 14:00:00', 2739133.43, 2731059.02, 2754969.91, 2731059.02], ['Wed 02 Jun 2021, 14:30:00', 2751213.2, 2736666.45, 2751213.2, 2739833.82], ['Wed 02 Jun 2021, 15:00:00', 2767686.26, 2756561.23, 2774474.36, 2756561.23], ['Wed 02 Jun 2021, 15:30:00', 2781821.89, 2770241.11, 2781821.89, 2770241.11], ['Wed 02 Jun 2021, 16:00:00', 2778208.11, 2771816.21, 2789036.17, 2789036.17], ['Wed 02 Jun 2021, 16:30:00', 2778498.24, 2772470.98, 2785340.44, 2779634.8], ['Wed 02 Jun 2021, 17:00:00', 2761537.09, 2761537.09, 2767345.21, 2766398.96], ['Wed 02 Jun 2021, 17:30:00', 2759776.49, 2759776.49, 2768620.54, 2768620.54], ['Wed 02 Jun 2021, 18:00:00', 2765960.61, 2760073.78, 2765960.61, 2760073.78], ['Wed 02 Jun 2021, 18:30:00', 2765294.19, 2765294.19, 2775429.22, 2773883.86], ['Wed 02 Jun 2021, 19:00:00', 2772384.85, 2769503.14, 2777937.64, 2773013.08], ['Wed 02 Jun 2021, 19:30:00', 2771195.19, 2771195.19, 2775149.0, 2773786.36], ['Wed 02 Jun 2021, 20:00:00', 2764098.74, 2762159.66, 2769495.29, 2766192.63], ['Wed 02 Jun 2021, 20:30:00', 2747561.81, 2747561.81, 2765450.28, 2765425.1], ['Wed 02 Jun 2021, 21:00:00', 2754400.7, 2747264.5, 2756122.77, 2748806.69], ['Wed 02 Jun 2021, 21:30:00', 2760469.64, 2757429.53, 2764665.97, 2757429.53], ['Wed 02 Jun 2021, 22:00:00', 2765606.06, 2760184.99, 2766780.81, 2760907.15], ['Wed 02 Jun 2021, 22:30:00', 2747866.33, 2747866.33, 2764107.47, 2760686.46], ['Wed 02 Jun 2021, 23:00:00', 2735295.37, 2732628.61, 2747115.27, 2747115.27], ['Wed 02 Jun 2021, 23:30:00', 2752856.01, 2737136.13, 2752856.01, 2738955.36], ['Thu 03 Jun 2021, 00:00:00', 2749601.05, 2745158.85, 2754505.03, 2754505.03], ['Thu 03 Jun 2021, 00:30:00', 2732568.83, 2732568.83, 2753258.94, 2743505.11], ['Thu 03 Jun 2021, 01:00:00', 2726132.45, 2726132.45, 2736916.06, 2736916.06], ['Thu 03 Jun 2021, 01:30:00', 2739768.06, 2729040.82, 2743387.0, 2729040.82], ['Thu 03 Jun 2021, 02:00:00', 2726328.34, 2726328.34, 2740275.97, 2740275.97], ['Thu 03 Jun 2021, 02:30:00', 2732910.03, 2719227.71, 2732910.03, 2719473.9], ['Thu 03 Jun 2021, 03:00:00', 2730708.05, 2726366.44, 2732652.42, 2728259.56], ['Thu 03 Jun 2021, 03:30:00', 2739529.01, 2731475.72, 2739529.01, 2731475.72], ['Thu 03 Jun 2021, 04:00:00', 2753921.86, 2737761.74, 2753921.86, 2742009.39], ['Thu 03 Jun 2021, 04:30:00', 2770448.22, 2756348.6, 2770448.22, 2756348.6], ['Thu 03 Jun 2021, 05:00:00', 2784105.66, 2770344.92, 2784105.66, 2770344.92], ['Thu 03 Jun 2021, 05:30:00', 2816044.22, 2788710.6, 2816044.22, 2788710.6], ['Thu 03 Jun 2021, 06:00:00', 2841610.6, 2803469.74, 2846321.98, 2806934.26], ['Thu 03 Jun 2021, 06:30:00', 2832951.67, 2829036.33, 2839367.17, 2839367.17], ['Thu 03 Jun 2021, 07:00:00', 2848184.09, 2831066.26, 2849151.77, 2831066.26], ['Thu 03 Jun 2021, 07:30:00', 2829755.06, 2829755.06, 2847820.09, 2847820.09], ['Thu 03 Jun 2021, 08:00:00', 2825071.67, 2824551.71, 2830912.41, 2824551.71], ['Thu 03 Jun 2021, 08:30:00', 2847684.7, 2830287.0, 2847684.7, 2830287.0], ['Thu 03 Jun 2021, 09:00:00', 2840999.2, 2840999.2, 2840999.2, 2840999.2]];
var data = google.visualization.arrayToDataTable(rows.map(function (row)
var date = new Date(row[0]);
var low = row[3];
var open = row[1];
var close = row[4];
var high = row[2];
return [date, low, open, close, high];
), true);
var options =
legend: 'none',
candlestick:
fallingColor: strokeWidth: 0, fill: '#a52714', // red
risingColor: strokeWidth: 0, fill: '#0f9d58' // green
;
var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
chart.draw(data, options);
);<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>【讨论】：
以上是关于为啥谷歌图表为烛台图提供不同的输出？的主要内容，如果未能解决你的问题，请参考以下文章