Highcharts、jquery 和 csv

问题描述 投票:0回答:1

早上好,我请求你帮忙处理这段js代码。 我想从每小时更新的 csv 文件开始制作一个图表(3 行)。

我找到了一个很好的起点,但对我来说问题是用 .

反转标签(SPEED_MED、SPEED_MIN、SPEDD_MAX)

我的 csv(文件.csv):

Data,SPEED_MED,SPEED_MAX,SPEED_MIN
2024-03-30 12:00:00,5.1,11.2,0.8
2024-03-30 13:00:00,8.1,17.5,2.0
2024-03-30 14:00:00,4.2,13.9,0.0
2024-03-30 15:00:00,3.7,9.0,0.0
2024-03-30 16:00:00,5.0,11.2,0.8
<!DOCTYPE html>
<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>My first column chart by Highcharts</title>
        <!-- 1. Add JQuery and Highcharts in the head of your page -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script src="https://code.highcharts.com/highcharts.js"></script>
        
        <!-- 2. You can add print and export feature by adding this line -->
        <script src="https://code.highcharts.com/modules/exporting.js"></script>
        
        
        <!-- 3. Add the JavaScript with the Highchart options to initialize the chart -->
        <script type="text/javascript">
        jQuery(document).ready(function() { 
            var options = {
                chart: {
                    renderTo: 'container',
                    type: 'line'
                },
                title: {
                    text: 'Velocità Vento m/s'                  
                },
                subtitle: {
                    text: 'Ultime 48h'
                },
                xAxis: {
                    categories: []
                },
                yAxis: {
                    title: {
                        text: 'm/s'
                    }
                },
                series: []
            };
            // JQuery function to process the csv data 
            $.get('/public/grafici/data/File.csv', function(data) {
                // Split the lines 
                var lines = data.split('\n');
                $.each(lines, function(lineNo, line) {
                    var items = line.split(',');
                    
                    // header line contains names of categories 
                    if (lineNo == 0) {
                        $.each(items, function(itemNo, item) {
                            //skip first item of first line 
                            if (itemNo > 0) options.xAxis.categories.push(item);
                        });
                    }
                    
                    // the rest of the lines contain data with their name in the first position 
                    else {
                        var series = { 
                            data: []
                        };
                        $.each(items, function(itemNo, item) {
                            if (itemNo == 0) {
                                series.name = item;
                            } else {
                                series.data.push(parseFloat(item));
                            }
                        });
                        
                        options.series.push(series);
                    }
                    
                });
                //putting all together and create the chart 
                var chart = new Highcharts.Chart(options);
            });         
            
        });
        </script>
        
    </head>
    <body>
        
        <!-- 3. Add the container -->
        <div id="container" style="width: 600px; height: 400px; margin: 0 auto"></div>      
                
    </body>
</html>

这是当前结果:https://editor.p5js.org/nunzio.disanti/sketches/GB46c5QaF

jquery csv highcharts
1个回答
0
投票

您可以添加 Highcharts 数据模块:

<script src="https://code.highcharts.com/modules/data.js"></script>

并使用内置功能解析 CSV 文件:

$.get('/Data/File.csv', function(data) {
    options.data = {
        csv: data
    }; 
    var chart = new Highcharts.Chart(options);
}); 

现场演示:https://editor.p5js.org/ppotaczek8/sketches/hf_pLy1Fr

API 参考: https://api.highcharts.com/highcharts/data.csv

© www.soinside.com 2019 - 2024. All rights reserved.