JS Highchart导入CSV数据

JS Highchart Import CSV data

本文关键字：数据 CSV 导入 Highchart JS 更新时间：2023-09-26

hey Guys

我是JS的新手，我一直试图通过编程图表来练习一点。到目前为止，它运行良好。我用固定数据制作了一些图表。现在我尝试从csv文件导入图表数据。好吧，它没有起作用。我一整天都在看其他帖子，在谷歌上搜索，但我不知道我做错了什么。你能帮帮我吗?

在x轴上显示日期，在y轴上显示值。

csv数据示例:

01.02.2014就是,0.4500.780 01.02.2014 01:00:00;

0.746 01.02.2014 02:00:00;

    <!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>myChart</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var config = {
                chart: {
                    renderTo: 'chart',
                    type: 'line',
                    zoomType: 'xy'
                },
                title: {
                    text: 'TestChart'
                },
                subtitle: {
                    text: 'fix data'
                },
                xAxis: {
                    type: 'datetime',
                    categories: []
                },
                yAxis: {
                    title: {
                        text: 'Values'
                    },
                    min: 0
                },
                plotOptions: {
                    series: {
                        marker: {
                            enabled: true
                        },
                        step: 'left'
                    }
                },
                legend: {
                    enabled: true,
                    align: 'center',
                    shadow: true
                },
                tooltip: {
                    valueDecimals: 2
                },
                series: []
            };
            $.get('test.csv', function (data) {
                // Split the lines
                var lines = data.split(''n');
                $.each(lines, function (lineNo, line) {
                    var series = {
                        data: []
                    };
                        var x = line.split(';');
                        var dateAndTime = x[0];
                        var value = x[1];
                        var y = dateAndTime.split(' ');
                        var date = y[0];
                        var time = y[1];
                        var a = date.split('.');
                        var b = time.split(':');
                        var UTCDate = Date.UTC(a[0], a[1], a[2], b[0], b[1], b[2]);
                        config.xAxis.categories.push(UTCDate);
                        series.data.push(parseFloat(value));
                    config.series.push(series);
                });
                chart = new Highcharts.StockChart(config)
            });
        });
    </script>
</head>
<body>
    <script src="../../scripts/highstock.js"></script>
    <script src="../../scripts/exporting.js"></script>
    <div id="chart" style="min-width: 310px; height: 600px; margin: 0 auto"></div>
</body>
</html>

您需要加载csv文件，将日期解析为时间戳(即Date.UTC()或Date.parse())并提取y值。

http://www.highcharts.com/docs/working-with-data/preprocessing-data-from-a-file-csv-xml-json

我找到了解决方案。因为每个值都有一个给定的日期，所以我需要自己创建数据集:

series.data.push([Date.UTC(a[2], a[1], a[0], b[0], b[1], b[2],b[2]),parseFloat(value)]);