Question

我有多个定期更新的CSV文件。我可以使用“来自动态CSV的实时数据”示例（https://www.highcharts.com/demo/live-data），但它仅使用1个CSV文件，而我需要使用单独的CSV文件显示全部系列。

当前，我只能在图形中显示CSV文件之一。我希望有人可以举例说明如何在同一张图中以2个独立系列两次显示示例time-data.csv。

function createChart() {

    Highcharts.chart('container', {
        chart: {
            type: 'spline'
        },
        yAxis: {
        max: 40,
        min: 15
    },
        title: {
            text: 'Live Data'
        },
        data: {
            csvURL: 'https://demo-live-data.highcharts.com/time-data.csv',
            enablePolling:  true,
            dataRefreshRate: 2
        }
    });
}

Answer 1

Highcharts不具有内置功能，无法从多个CSV源加载数据。您需要手动获取数据并将其解析为Highcharts所需的格式。例如：

var url1 = 'https://demo-live-data.highcharts.com/time-data.csv',
    url2 = 'https://demo-live-data.highcharts.com/time-data.csv';

function parseData(data) {
    var parsedData = [],
        splittedData = data.split(/\n/),
        splittedRow;

    splittedData.shift();

    splittedData.forEach(function(row) {
        splittedRow = row.split(',');
        parsedData.push([new Date(splittedRow[0]).getTime(), Number(splittedRow[1])]);
    });

    return parsedData;
}

$.get(url1, function(data1) {
    $.get(url2, function(data2) {
        // parse data1
        var parsedData1 = parseData(data1)
        // parse data2
        var parsedData2 = parseData(data2)

        Highcharts.chart('container', {
            xAxis: {
                type: 'datetime'
            },
            series: [{
                data: parsedData1
            }, {
                data: parsedData2
            }]
        });
    });
});

实时演示： https://jsfiddle.net/BlackLabel/u93khtva/

有用的线程： load data in highcharts from 2 different csv files

来自不同CSV文件的动态多个系列

1 个答案: