【问题标题】:Why I am not getting line in the graph?为什么我没有在图中得到线条?
【发布时间】:2013-06-06 17:04:05
【问题描述】:

我尝试了这种编码,但我在图中没有得到任何线条,请告诉我我哪里错了。

$(document).ready(function() {
var options = {
                chart: {
                    renderTo:'container',
                    zoomType:'xy'
                },
                title: {
                    text: 'Oviedo hoy'
                },

                subtitle: {
                                text: 'datos:'
                            },

                xAxis:{
                        labels:{

                            formatter:function(){

                                return Highcharts.dateFormat('%H:%M:%S',this.value);
                            }
                  }
                },
                series: []
            };


$.get('data.csv', function(data) {
                // Split the lines

                options.series.push({
                    data:[]
                });

                var tmptimestamp = '';

                var lines = data.split('\n');
                    $.each(lines, function(lineNo, line) {
                        var items = line.split(',');
                        // header line containes categories
                        if (lineNo > 0 )
                        {


                              //parsing
                                     var datestamp = items[0].split(' '),
                                         date = datestamp[0].split('/'),
                                         time = datestamp[1].split(':'),
                                         timestamp = Date.UTC(parseFloat(date[2]),
                      parseFloat(date[1]),parseFloat(date[0]),parseFloat(time[0]),
                      parseFloat(time[1]),parseFloat(time[2]));


                                    if(tmptimestamp != timestamp)
                                    {
                                        options.series[0].data.push({
                                            x:timestamp,
                                            y:parseFloat(items[5]) 
                                        });

                                        tmptimestamp = timestamp; 
                                    }

                        }
                    });


                    var chart = new Highcharts.StockChart(options,function(chart){
                        console.log(chart);
                    });
                });
     });

这是我的 csv 文件的一小部分,但实际文件真的很长,比如 18,000 行和 17 列。

                Time            Tcoll   Tstor   TglyHXin
      01/01/2013 12:00:54 AM    103.34  103.32  26.94
      01/01/2013 12:01:55 AM    103.29  103.3   26.94
      01/01/2013 12:02:55 AM    103.29  103.33  26.95
      01/01/2013 12:03:55 AM    103.29  103.03  26.94
      01/01/2013 12:04:55 AM    103.34  103.27  26.94
      01/01/2013 12:05:55 AM    103.39  103.33  26.94
      01/01/2013 12:06:55 AM    103.3   103.01  26.94
      01/01/2013 12:07:55 AM    103.42  103.17  26.94
      01/01/2013 12:08:55 AM    103.37  103.16  26.94
      01/01/2013 12:09:55 AM    103.34  103.28  26.94

我不知道我哪里出错了,请给我建议我应该怎么做才能在我的图表中得到这条线。

提前致谢,期待您的帮助。

【问题讨论】:

  • 您是否尝试提供少量数据?
  • 您是否在控制台中看到任何错误消息?您能否确认.get 确实返回了数据并且调用了回调?
  • 我只是尝试了少量数据,它适用于那个,但我将如何让它适用于大文件@tracevipin
  • 是的,它显示的日期无效并且其中没有行@MattBurland
  • 另一件事,当我尝试少量数据时,它显示错误的日期@tracevipin

标签: javascript jquery parsing csv highcharts


【解决方案1】:

turboThreshold 设置为更高的值(参见docs)或更改为:

                                    options.series[0].data.push({
                                        x:timestamp,
                                        y:parseFloat(items[5]) 
                                    });

到:

                                    options.series[0].data.push([
                                        timestamp,
                                        parseFloat(items[5]) 
                                    ]);

关于错误日期: 月份从 0 开始,而不是从 1 开始,所以更改:

timestamp = Date.UTC(parseFloat(date[2]),
                  parseFloat(date[1]),parseFloat(date[0]),parseFloat(time[0]),
                  parseFloat(time[1]),parseFloat(time[2]));

到:

timestamp = Date.UTC(parseFloat(date[2]),
                  parseFloat(date[1]) - 1,parseFloat(date[0]),parseFloat(time[0]),
                  parseFloat(time[1]),parseFloat(time[2]));

【讨论】:

  • 感谢您的回复@Pawel Fus,但它仍然无法正常工作,它让我发疯..
  • 是否可以在图表上绘制多个参数?是,是的,那么如何? @PawelFus
  • 控制台有任何错误吗?关于参数,我不知道你是什么意思。
  • 是的,它在图表中也没有显示任何线,即使在进行了更改之后,它也只适用于少量数据@Pawel Fus
  • 关于参数,我的意思是,我的图表中是否可以有 2 条或更多条线用于不同的列。 @Pawel Fus
猜你喜欢
  • 2014-01-29
  • 2020-11-03
  • 2022-01-22
  • 2020-11-19
  • 2013-07-15
  • 1970-01-01
  • 2010-12-08
  • 2020-05-25
  • 2015-06-03
相关资源
最近更新 更多