如何从CSV文件创建Highcharts Area Range图形？_Csv_Highcharts

如何从CSV文件创建Highcharts Area Range图形？

csv highcharts

如何从CSV文件创建Highcharts Area Range图形？,csv,highcharts,Csv,Highcharts,我的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,

我的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

我想制作一个highcharts多系列图，其中包括arearange（使用最大值和最小值）和line（平均值）。但我无法将日期写入x轴值

到目前为止，我尝试了以下示例：

这是我的密码：

<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>


功能测试（）
{
var c=[]；
var范围=[]；
var平均值=[]；
var电流=[]；
var参考=[]；
$.get（'data.csv'，函数（数据）
{
变量行=data.split（'\n'）；
对于（i=1；i您的代码出现了一些问题。您可以查看以获得更正的版本
首先，您的CSV数据指定了4列，但数据中只有3列。我为演示添加了一些模拟平均数据
其次，您的类别c
设置为items[1]
，尽管items[0]
包含您的日期值
最后，在将CSV数据解析为可图表的片段时，您需要将分割值（作为字符串）转换为数字
，正如K.Rohde所注意到的，您的数据缺少一列（可能是平均值）所有y值都应该是数字，而不是字符串。此外，如果x值是日期，则不必使用类别。只需将xAxis的类型更改为datetime，这样就不必创建和填充其他类别数组（c）
日期、平均值、最大值、最小值
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

API参考：


示例：

-已更正的演示

-带有日期时间类型的xAxis
<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>