Question

我的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 Multiple seriesgraph，其中包含arearange（使用最大值和最小值）和line（平均值）。但是我无法将日期写为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>

Answer 1

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

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

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

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

Answer 2

正如K. Rohde所注意到的，你的数据缺少一列（可能是平均值），你所有的y值都应该是数字，而不是字符串。此外，如果x值是日期，则不必使用类别。简单地说，改变xAxis＆＃39;输入日期时间＆＃39;这样您就不必创建和填充其他类别数组（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，日期时间类型

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

2 个答案: