Highchart java脚本正在填充

Highchart java script getting filled

本文关键字:填充 脚本 java Highchart      更新时间:2023-09-26

你好,我有一个从csv文件生成高图表的javascript:

<script>
                function Showgraph(){
                    $.ajax({
                         url: 'Merge_files.php',
                         // success: function(data) {
                         // $('.result').html(data);
                         // alert('Load was performed.');
                       // }
                    });
                    var options = {
                        chart: {
                            renderTo: 'container',
                            defaultSeriesType: 'line'
                        },
                        title: {
                            text: 'Measurement data'
                        },
                        xAxis: {
                            //categories: [],
                            title: {
                                text: 'Measurement number'
                                },
                                labels: {
                                    enable: false,
                                y:20, rotation: -45, allign: 'right'
                                }
                        },
                        yAxis: {
                            title: {
                                text: 'Retro Reflection'
                            }
                        },
                        series: []
                    };
                    sleep(100);
                    $.get('Sensor_datafull.txt', function(data) {
                        // Split the lines
                        var lines = data.split(''n');
                        $.each(lines, function(lineNo, line) {
                        var items = line.split(',');

                            var series = {
                                data: []
                            };
                            $.each(items, function(itemNo, item) {
                                if (itemNo == 0) {
                                    series.name = item;
                                } else {
                                    series.data.push(parseFloat(item));
                                }
                            });
                            options.series.push(series);

                        });
                        // Create the chart
                        var chart = new Highcharts.Chart(options);
                    })
                }
<!--Sleep function to pause the Showgraph, so the fiels in Merge_files will be generated before chart -->
                function sleep(milliseconds) {
                  var start = new Date().getTime();
                  for (var i = 0; i < 1e7; i++) {
                    if ((new Date().getTime() - start) > milliseconds){
                      break;
                    }
                  }
                }
</script>

脚本将 7 个文件"合并"为一个大文件并创建图表。这些文件每秒都会充满新的测量数据。合并文件如下所示:

0.20,-517.2,-314.9,227.2,....0.33,-228.5,-79.0,130.7,....0.50,-286.6,-140.6,84.5,....0.70,-96.6,-62.6,23.0,....1.00,-18.6,-12.4,11.6,....1.50,-62.7,-35.9,-11.0,....2.00,-37.7,-24.0,-1.5,....

问题是当文件达到一定大小时,无法制作高图表并冻结。然后我想知道是否可以使高图表仅像csv中每行的第一条数据(是类别)和500个最后数据一样。文件什么的?也欢迎任何其他解决问题的想法!

提前非常感谢您的帮助!

一开始的问题是你的架构不正确。你不能使用睡眠函数,因为如果你的第一个ajax加载时间更长,那么furher代码就有意义了。为避免这种情况,您可以调用一次。在PHP文件中,准备像数组这样的结构和数据,并将其转换为JSON(通过json_encode函数)。在javascrpt中,调用$.getJSON()并初始化你的图表。