Highcharts Highstock 如何使用系列地图工具从一组嵌入式 CSV 数据中绘制 OHLC 和折线图？

Question

此示例使用相同嵌入式 JSON 数据的两个版本绘制 ohlc 和折线图：

Combination of ohlc and line plot in highchart

但是需要两组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>

下面的代码和我的做法类似，没有给出结果。摘自这个link下的问答：

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
            }
        }]
    });
});

这个link下的问题和答案表明在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 和折线图？

Highcharts Highstock How to Plot OHLC and Line Charts from One Set of Embedded CSV Data Using Series Map Tools?

javascript

csv

highcharts