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

Question

我正在尝试使用 Google 图表 (https://developers.google.com/chart/interactive/docs/gallery/candlestickchart). I am using flask as my backend of the website through which I am sending data to the frontend file. For the data, I am using this API (https://api.coingecko.com/api/v3/coins/bitcoin/ohlc?vs_currency=inr&days=1) 创建烛台图，其中 returns 值列表的顺序为 [Timestamp, O, H, L, C]。问题是，如果我尝试使用 google 图表绘制图形，它会给出不同的结果（错误结果），如果我使用 python 库 'plotly' (https://plotly.com/python/candlestick-charts/)然后它给出了正确的结果。

这是 google 个图表的 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>

这是 google 个图表的结果。

这是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 图表。我怎样才能从 google 图表中得到正确的结果？

Answer 1

google 图表的数据格式与 plotly 图表不同。
值的顺序不同。

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

而 google --> date, low, open, close, high
（参见 google 的 data format）

请参阅以下 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>

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

Why google charts is giving different output for candlestick chart?

javascript

charts

google-visualization

candlestick-chart

plotly