Highcharts Highstock 如何使用系列地圖工具從一組嵌入式 CSV 數據繪制 OHLC 和折線圖？

Question

此示例使用相同的嵌入 JSON 數據的兩個版本繪制 ohlc 和折線圖：

但它需要兩套JSON格式的數據，而且數據是冗余的。

相反，我想將所有數據保存在一種嵌入式 CSV 格式中，如下面的非操作代碼所示。 選擇的示例將繪制 OHLC 條形圖和一條樣本線，它們都存儲在同一行 CSV 數據中。 我想知道如何讓Highstock識別系列規范中的csv？

 <html> <head> <title> AAPL Combined OHLC and Moving Average </title> <script src="https://code.highcharts.com/stock/highstock.js"></script> <script src="https://code.highcharts.com/modules/data.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> </head> <body> <div id="chart-container" style="width: 100%; height: 100%; margin: 0 auto"></div> <pre id="csv" style="display: none"> date,open,high,low,close,line1 1147996800000, 63.26, 64.88, 62.82, 64.51,63 1148256000000, 63.87, 63.99, 62.77, 63.38,63 1148342400000, 64.86, 65.19, 63.00, 63.15,64 1148428800000, 62.99, 63.65, 61.56, 63.34,63 1148515200000, 64.26, 64.45, 63.29, 64.33,64 1148601600000, 64.31, 64.56, 63.14, 63.55,64 1148947200000, 63.29, 63.30, 61.22, 61.22,63 1149033600000, 61.76, 61.79, 58.69, 59.77,62 </pre> <script type="text/javascript"> Highcharts.stockChart('chart-container', { rangeSelector: { selected: 2 }, title: { text: 'AAPL Stock Price' }, series: [{ type: 'ohlc', data: ? how to pass date and ohlc values via csv data? }, { type: 'line', data: ? how to pass date and line1 values via csv data? }] }); </script> </body> </html>

下面的代碼與我的方法類似，沒有給出結果。 摘自此鏈接下的問答：

https://www.highcharts.com/forum/viewtopic.php?t=33408

 $(function () { $('#column').highcharts({ series: [{ type: 'column', data: { csv: document.getElementById('column_csv').innerHTML } }, { type: 'pie', name: 'Company Total Sales', data: { csv: document.getElementById('column_csv2').innerHTML }, center: [100, 80], size: 100, showInLegend: false, dataLabels: { enabled: false } }] }); });

此鏈接下的問答表明使用 Highstock 中的系列映射工具可以解決我的問題：

https://www.highcharts.com/forum/viewtopic.php?t=39714

http://jsfiddle.net/ppotaczek/k6z0scvq/

CSV 的格式在問題中：

Fecha, Direccion, Velocidad del Viento
2017/10/06 12:10, 44.5257, 230.173
2017/10/06 12:20, 47.424, 230.387
2017/10/06 12:30, 48.5546, 232.287
2017/10/06 12:40, 51.1385, 230.373
2017/10/06 12:50, 48.7313, 233.013
2017/10/06 13:00, 47.6305, 233.94
2017/10/06 13:10, 48.0115, 233.84
2017/10/06 13:20, 47.1394, 232.713

使用系列映射的答案：

data: {
    csv: document.getElementById('csv').innerHTML,
    seriesMapping: [{
        x: 0,
        value: 1,
        direction: 2
    }, {
        x: 0,
        y: 1
    }],     
}

Answer 1

您只需要將 csv 數據映射到正確的系列數據結構：

data: {
  csv: document.getElementById('csv').innerHTML,
  seriesMapping: [{
    x: 0,
    open: 1,
    high: 2,
    low: 3,
    close: 4
  }, {
    x: 0,
    y: 5
  }]
},
series: [{
  type: 'ohlc'
}, {
  type: 'line'
}]

現場演示： http : //jsfiddle.net/BlackLabel/da74pokt/

API參考： https : //api.highcharts.com/highcharts/data.seriesMapping

Highcharts Highstock 如何使用系列地圖工具從一組嵌入式 CSV 數據繪制 OHLC 和折線圖？

問題描述

1 個解決方案

解決方案1
1 已采納 2021-07-15 17:47:48

Highcharts Highstock 如何使用系列地圖工具從一組嵌入式 CSV 數據繪制 OHLC 和折線圖？

問題描述

1 個解決方案

解決方案1 1 已采納 2021-07-15 17:47:48

解決方案1
1 已采納 2021-07-15 17:47:48