简体   繁体   English

绘制txt值(绘图图)

[英]Plot txt values (Flot charts)

I'm a bit stuck with this issue. 我对此问题有些困惑。

I have a file with the elements to plot separated in columns, as the example that follows: 我有一个文件,其中要绘制的元素以列分隔,如下例所示:

ID Number Hour Name Mood Seconds Hour2
1 29.1 11:32:37 Tim Good 0954 11:32:34 PM
2 31.9 11:33:19 Tim Fine 1251 11:33:15 PM
3 32.0 11:54:16 Tim Excellent 1897 11:54:12 PM
4 36.6 12:00:43 Time Good 0997 12:00:37 PM

What I want is to be able to extract all these data from a .txt file and store it in variables in order to work with them in an easier way, excluding the first line. 我想要的是能够从.txt文件中提取所有这些数据并将其存储在变量中,以便以更简单的方式(不包括第一行)使用它们。 Then, what I was trying to do is to plot for example just the Seconds column vs. the Hour one, or the Mood column vs. the Hour one (this one could be more difficult because the mood is a string), all this in FLOT Charts, but I'm not able to do it, as I do not know the right commands to do it and I've looked for them on the internet but I haven't found anything. 然后,我想做的是绘制例如Seconds列与Hour 1的关系图,或者Mood列与Hour 1的关系图(由于情绪是一个字符串,因此可能更困难), FLOT Charts,但是我做不到,因为我不知道执行该命令的正确命令,并且我已经在互联网上寻找它们,但是我什么都没找到。 I did try modifying a file from a Stackoverflow post to see if it works, but the page was just blank. 我确实尝试过从Stackoverflow帖子中修改文件,以查看它是否有效,但是页面只是空白。 The code used is the following one (head tag is there but the post went nuts when I typed it in here and of course the .js files are placed in the same folder as this code, and so is the datafile.txt file): 所使用的代码是以下代码(有head标记,但是当我在此处键入内容时,该帖子变得很疯狂,当然.js文件与该代码位于同一文件夹中,datafile.txt文件也位于该文件夹中):

<!DOCTYPE html>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <!-- 1. Add JQuery and Highcharts in the head of your page -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>

    <!-- 2. You can add print and export feature by adding this line -->
    <script src="http://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: 'column'
            },
            title: {
                text: 'Tiny Tool Monthly Sales'                 
            },
            subtitle: {
                text: '2014 Q1-Q2'
            },
            xAxis: {
                categories: []
            },
            yAxis: {
                title: {
                    text: 'Sales'
                }
            },
            series: []
        };
        // JQuery function to process the csv data
        $.get('datafile.txt', function(data) {
            $.each(data, 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) {
                        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>

Do you have any idea where it went wrong or how to accomplish it? 您是否知道哪里出了问题或如何解决? Thank you all very much! 非常感谢大家!

The $.get() method returns a string and using the $.each() method with a string calls the callback function for each character in the string, not for each line. $.get()方法返回一个字符串,并将$.each()方法与一个字符串一起使用$.each()字符串中的每个字符而不是每一行调用回调函数。 Change the call to $.each() to this: 将对$.each()的调用更改为此:

$.each(data.split('\n'), function(lineNo, line) {

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM