在 highcharts 样条图中创建多个系列？答案

【问题标题】：Creating multiple series in a highcharts spline chart?在 highcharts 样条图中创建多个系列？
【发布时间】：2013-01-24 10:25:21
【问题描述】：

我使用 Highcharts 库制作了一个样条图，其中包含从两个不同的 CSV 文件加载的两个系列数据，它工作正常。现在我需要另一个样条图，但有 54 个数据系列。

我使用 PHP 创建了 54 个 CSV 文件，然后我生成图表的 Javascript 代码是：

<script type="text/javascript">
$(function () {
    var chart;
    $(document).ready(function() {
        var options = {
            chart: {
                renderTo: 'chart_day',
                type: 'spline'
            },
            title: {
                text: 'Andamento giornaliero temperatura.'
            },
            xAxis: {
                type: 'datetime',
                second: '%H:%M:%S'
            },
            yAxis: {
                title: {
                    text: 'Temperatura (°C)'
                },
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.series.name +'</b><br/>'+
                    Highcharts.dateFormat('%H:%M:%S', this.x) +': '+ this.y +' °C';
                }
            },
            series: [ <?php for($i=0;$i<52;$i++)
                echo "{ name: \"Sensor".($i+1)."\", data: []},";
                echo "{ name: \"Sensor".($i+1)."\", data: []}";
            ?>]
        };

        for( i=1; i<=54; i++){
            if(i!=5){
                $.get('file/file'+i+'.txt', function(data) {
                    // Split the lines
                    var lines = data.split('\n');

                    // Iterate over the lines and add categories or series
                    $.each(lines, function(lineNo,line) {
                        if (line != "") {
                            var items = line.split(',');
                            var timeElements = items[0].split(':');
                            var date = Date.UTC(2004, 2, 1, timeElements[0], timeElements[1], timeElements[2], 0);
                            options.series[i-1].data.push([date,parseFloat(items[1])]); 
                        }
                    });
                    if(i==54)
                    chart = new Highcharts.Chart(options);
                });
            }
        }
    });
});
</script>

JS 控制台报错：

"Uncaught TypeError: Cannot read property 'data' of undefined"

【问题讨论】：

那个错误的行是什么？
可能是某些文件之一 file/file'+i+'.txt 为空？
如果您填写了数据元素，您可以在控制台中签到吗？

标签： javascript csv highcharts time-series spline

【解决方案1】：

似乎您的系列初始化已损坏。试试这个

var series  = [];
for(i=0;i<52;i++)
{
   series.push({name: ('Sensor' + (i + 1)), data: []});
}

并根据您的选择设置此系列对象：

var options = {
            ..
            series: series
        };

【讨论】：