如何从 CSV 文件创建 Highcharts Arearange 图？答案

【问题标题】：How can I create Highcharts Arearange graph from CSV file?如何从 CSV 文件创建 Highcharts Arearange 图？
【发布时间】：2017-07-21 19:16:09
【问题描述】：

我的 CSV 内容如下所示：

date,average,maximum,minimum
2017-01-01,0.02963,0.05595
2017-01-02,0.02929,0.05566
2017-01-03,0.02921,0.05579
2017-01-04,0.02920,0.05682
2017-01-05,0.02942,0.06489
2017-01-06,0.02971,0.07201
2017-01-07,0.02861,0.05390
2017-01-08,0.02820,0.05243
2017-01-09,0.02896,0.05203
2017-01-10,0.04215,0.24689
2017-01-11,0.02853,0.05130
2017-01-12,0.02777,0.05065
2017-01-13,0.02769,0.05022
2017-01-14,0.02723,0.04985

我想制作一个带有面积范围（使用最大值和最小值）和线（平均值）的高图表多重系列图。但我无法将日期写为 x 轴值。

到目前为止，我尝试了以下示例：https://www.highcharts.com/demo/arearange-line

这是我的代码：

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
</head>
<body onload="test()">
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script type="text/javascript">
function test() 
{
        var c=[];
        var ranges = [];
        var averages = [];
        var current = [];
        var reference = [];
        $.get('data.csv', function(data) 
        {
            var lines = data.split('\n');
            for(i=1;i<lines.length; i++) 
            {
                var items = lines[i].split(',');
                c.push(items[1]);
                ranges.push([items[0],items[2],items[3]]);
                averages.push([items[0],items[1]]);
            }

        });

Highcharts.chart('container', {

    title: {
        text: 'July Data'
    },

    xAxis: {    
        categories: c
     },

    yAxis: {
        title: {
            text: 'Value'
        }
    },

    tooltip: {
        crosshairs: true,
        shared: true,
        valueSuffix: 'mm/day'
    },

    legend: {
    },

    series: [{
        name: 'Average',
        data: averages,
        zIndex: 1,
        marker: {
            fillColor: 'white',
            lineWidth: 2,
            lineColor: Highcharts.getOptions().colors[0]
        }
    }, 
    {
        name: 'Climatology',
        data: ranges,
        type: 'arearange',
        lineWidth: 0,
        linkedTo: ':previous',
        color: Highcharts.getOptions().colors[0],
        fillOpacity: 0.3,
        zIndex: 0,
        marker: {
            enabled: false
        }
    }]
});
};
</script>
</body>

【问题讨论】：

标签： csv highcharts

【解决方案1】：

正如 K. Rohde 所注意到的，您的数据缺少一列（可能是平均值），并且您的所有 y 值都应该是数字，而不是字符串。此外，如果 x 值是日期，则不必使用类别。只需将 xAxis' 类型更改为 'datetime'，这样您就不必创建和填充其他类别数组 (c)。

<pre id="csv" style="display:none">date,average,maximum,minimum
2017-01-01,0.04,0.02963,0.05595
2017-01-02,0.04,0.02929,0.05566
2017-01-03,0.04,0.02921,0.05579
2017-01-04,0.04,0.02920,0.05682
2017-01-05,0.04,0.02942,0.06489
2017-01-06,0.04,0.02971,0.07201
2017-01-07,0.04,0.02861,0.05390
2017-01-08,0.04,0.02820,0.05243
2017-01-09,0.04,0.02896,0.05203
2017-01-10,0.1,0.04215,0.24689
2017-01-11,0.04,0.02853,0.05130
2017-01-12,0.04,0.02777,0.05065
2017-01-13,0.04,0.02769,0.05022
2017-01-14,0.04,0.02723,0.04985</pre>

API 参考：
http://api.highcharts.com/highcharts/xAxis.type

示例：
http://jsfiddle.net/ez1as425/ - 更正演示
http://jsfiddle.net/g6mojLdm/ - 日期时间类型的 xAxis

【讨论】：

【解决方案2】：

您的代码存在一些问题。您可以查看Fiddle here 以获得更正版本。

首先，您的 CSV 数据指定了 4 列，但数据中只有 3 列。我为演示添加了一些模拟平均数据。

其次，您的类别c 设置为items[1]，尽管items[0] 包含您的日期值。

最后，在将 CSV 数据解析为图表片段时，您需要将拆分值（作为字符串）转换为 Number。

【讨论】：