为什么谷歌图表为烛台图表提供不同的输出？

问题描述

我正在尝试使用 Google 图表 (https://developers.google.com/chart/interactive/docs/gallery/candlestickchart) 创建烛台图。我使用 Flask 作为网站的后端，我通过它向前端文件发送数据。对于数据，我使用了这个 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],10:00:00',2728093.17,2739286.03,2728870.61],10:30:00',2718010.94,2723819.08,2723819.08],11:00:00',2715955.36,2714386.86,2726607.96,2722912.32],11:30:00',2718954.63,2703646.56,2721812.79,2713890.29],12:00:00',2724179.1,2716975.82,2727909.36,2716975.82],12:30:00',2733265.55,2720430.76,2735768.63,2720430.76],13:00:00',2722923.22,2732580.23,2732580.23],13:30:00',2724002.8,2710545.36,2719338.8],14:00:00',2739133.43,2731059.02,2754969.91,2731059.02],14:30:00',2751213.2,2736666.45,2739833.82],15:00:00',2767686.26,2756561.23,2774474.36,2756561.23],15:30:00',2781821.89,2770241.11,2770241.11],16:00:00',2778208.11,2771816.21,2789036.17,2789036.17],16:30:00',2778498.24,2772470.98,2785340.44,2779634.8],17:00:00',2761537.09,2767345.21,2766398.96],17:30:00',2759776.49,2768620.54,2768620.54],18:00:00',2765960.61,2760073.78,2760073.78],18:30:00',2765294.19,2775429.22,2773883.86],19:00:00',2772384.85,2769503.14,2777937.64,2773013.08],19:30:00',2771195.19,2775149.0,2773786.36],20:00:00',2764098.74,2762159.66,2769495.29,2766192.63],20:30:00',2747561.81,2765450.28,2765425.1],21:00:00',2754400.7,2747264.5,2756122.77,2748806.69],21:30:00',2760469.64,2757429.53,2764665.97,2757429.53],22:00:00',2765606.06,2760184.99,2766780.81,2760907.15],22:30:00',2747866.33,2764107.47,2760686.46],23:00:00',2735295.37,2732628.61,2747115.27,2747115.27],23:30:00',2752856.01,2737136.13,2738955.36],['Thu 03 Jun 2021,00:00:00',2749601.05,2745158.85,2754505.03,2754505.03],00:30:00',2732568.83,2753258.94,2743505.11],01:00:00',2726132.45,2736916.06,2736916.06],01:30:00',2739768.06,2729040.82,2743387.0,2729040.82],02:00:00',2726328.34,2740275.97,2740275.97],02:30:00',2732910.03,2719227.71,2719473.9],03:00:00',2730708.05,2726366.44,2732652.42,2728259.56],03:30:00',2739529.01,2731475.72,2731475.72],04:00:00',2753921.86,2737761.74,2742009.39],04:30:00',2770448.22,2756348.6,2756348.6],05:00:00',2784105.66,2770344.92,2770344.92],05:30:00',2816044.22,2788710.6,2788710.6],06:00:00',2841610.6,2803469.74,2846321.98,2806934.26],06:30:00',2832951.67,2829036.33,2839367.17,2839367.17],07:00:00',2848184.09,2831066.26,2849151.77,2831066.26],07:30:00',2829755.06,2847820.09,2847820.09],08:00:00',2825071.67,2824551.71,2830912.41,2824551.71],08:30:00',2847684.7,2830287.0,2830287.0],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()

结果如下：

我想在我的网站中使用谷歌图表。我怎样才能从谷歌图表中得到正确的结果？

解决方法

google chart的数据格式和plotly chart的不一样。
值的顺序不同。

对于 plotly，每一行应该是 --> date,open,high,low,close

而对于谷歌 --> date,close,high
（参见谷歌的 data format）

请参阅以下谷歌图表的工作片段，其中数据的顺序正确......

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],10:00:00',2728093.17,2739286.03,2728870.61],10:30:00',2718010.94,2723819.08,2723819.08],11:00:00',2715955.36,2714386.86,2726607.96,2722912.32],11:30:00',2718954.63,2703646.56,2721812.79,2713890.29],12:00:00',2724179.1,2716975.82,2727909.36,2716975.82],12:30:00',2733265.55,2720430.76,2735768.63,2720430.76],13:00:00',2722923.22,2732580.23,2732580.23],13:30:00',2724002.8,2710545.36,2719338.8],14:00:00',2739133.43,2731059.02,2754969.91,2731059.02],14:30:00',2751213.2,2736666.45,2739833.82],15:00:00',2767686.26,2756561.23,2774474.36,2756561.23],15:30:00',2781821.89,2770241.11,2770241.11],16:00:00',2778208.11,2771816.21,2789036.17,2789036.17],16:30:00',2778498.24,2772470.98,2785340.44,2779634.8],17:00:00',2761537.09,2767345.21,2766398.96],17:30:00',2759776.49,2768620.54,2768620.54],18:00:00',2765960.61,2760073.78,2760073.78],18:30:00',2765294.19,2775429.22,2773883.86],19:00:00',2772384.85,2769503.14,2777937.64,2773013.08],19:30:00',2771195.19,2775149.0,2773786.36],20:00:00',2764098.74,2762159.66,2769495.29,2766192.63],20:30:00',2747561.81,2765450.28,2765425.1],21:00:00',2754400.7,2747264.5,2756122.77,2748806.69],21:30:00',2760469.64,2757429.53,2764665.97,2757429.53],22:00:00',2765606.06,2760184.99,2766780.81,2760907.15],22:30:00',2747866.33,2764107.47,2760686.46],23:00:00',2735295.37,2732628.61,2747115.27,2747115.27],23:30:00',2752856.01,2737136.13,2738955.36],['Thu 03 Jun 2021,00:00:00',2749601.05,2745158.85,2754505.03,2754505.03],00:30:00',2732568.83,2753258.94,2743505.11],01:00:00',2726132.45,2736916.06,2736916.06],01:30:00',2739768.06,2729040.82,2743387.0,2729040.82],02:00:00',2726328.34,2740275.97,2740275.97],02:30:00',2732910.03,2719227.71,2719473.9],03:00:00',2730708.05,2726366.44,2732652.42,2728259.56],03:30:00',2739529.01,2731475.72,2731475.72],04:00:00',2753921.86,2737761.74,2742009.39],04:30:00',2770448.22,2756348.6,2756348.6],05:00:00',2784105.66,2770344.92,2770344.92],05:30:00',2816044.22,2788710.6,2788710.6],06:00:00',2841610.6,2803469.74,2846321.98,2806934.26],06:30:00',2832951.67,2829036.33,2839367.17,2839367.17],07:00:00',2848184.09,2831066.26,2849151.77,2831066.26],07:30:00',2829755.06,2847820.09,2847820.09],08:00:00',2825071.67,2824551.71,2830912.41,2824551.71],08:30:00',2847684.7,2830287.0,2830287.0],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,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>

candlestick-chart charts google-visualization javascript plotly