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