Question

我无法将大型.csv文件上传到HIGHCHART图表。我已经能够通过9（I）列绘制85KB到1486行的图表。这是一个例子：

TimeStamp Temp_1_01 Temp_1_02 Temp_2_01 Temp_2_02 Temp_3_01 Temp_3_02 Temp_4_01 Temp_4_02
5/15/2014, 3:25 408 487 63  84  67  91  63  78
5/15/2014 3:30  408 487 63  84  67  91  63  78
5/15/2014 3:35  407 489 63  84  67  91  63  78
5/15/2014 3:40  408 488 63  84  67  91  63  78
5/15/2014 3:44  408 488 63  84  67  91  63  78
...
5/22/2014 9:40  483 421 0   93  76  95  72  89

当我添加新行时，折线图会消失。有什么建议吗？

这是javascript：

 $.get('Dropbox/geo/sites/GC_Room/loveland.csv', function(data)
       {
          // Split the lines
          var lines = data.split('\n');
          var i = 0;
          var csvData = [];





          // Iterate over the lines and add categories or series
          $.each(lines, function(lineNo, line)
          {
             csvData[i] = line.split(',');

             i = i + 1;

          });


          var columns = csvData[0];

          var categories = [], series = [];


          for(var colIndex=0,len=columns.length; colIndex<len; colIndex++)
          {
             //first row data as series's name
             var seriesItem=
             {
                data:[],
                name:csvData[0][colIndex]
             };

             for(var rowIndex=1,rowCnt=csvData.length; rowIndex<rowCnt; rowIndex++)
             {
                //first column data as categories,
                if (colIndex == 0)
                {
                   categories.push(csvData[rowIndex][0]);
                }
                else if(parseFloat(csvData[rowIndex][colIndex])) // <-- here
                {
                   seriesItem.data.push(parseFloat(csvData[rowIndex][colIndex])); 
                }
             };
             //except first column
             if(colIndex>0)series.push(seriesItem);
          }         



          // Create the chart
          var chart = new Highcharts.Chart(
          {
             chart:
             {
                alignTick: false,
                renderTo: 'LANE_METALS',
                type: 'line'

             },
             title: {
                    text: 'Monthly Average Temperature',
                    x: -20 //center
                },
                subtitle: {
                    text: 'Source: LANE METALS',
                    x: -20
                },



             xAxis: 
             {  
                categories: categories,
                labels:

               {
                  step: 200,
                   text: 'Time',
                },
                tickWidth: 0
             },
             yAxis: 
             {
                        title: {
                        text: 'Temperature (\xB0C)'
                    },
                min: 0
             },
             tooltip:
             {
                formatter: function()
                {
                   return '<b>'+ this.series.name +'</b><br/>'+ this.x +': '+ this.y +'\xB0C';
                }
             },
             legend:
             {
                layout: 'vertical',
                //backgroundColor: '#FFFFFF',
                //floating: true,
                align: 'left',
                //x: 100,
                verticalAlign: 'top',
                //y: 70,
                borderWidth: 0
             },

             plotOptions:
             {
                area:
                {
                   turboThreshold: 0,
                   stacking: 'normal',
                   lineColor: '#666666',
                   lineWidth: 1,
                   marker:
                   {
                      lineWidth: 1,
                      lineColor: '#666666'
                   }
                }
             },
             series: series
          });

       });

Answer 1

问题可能是因为turboThreshold

默认情况下，turboThreshold设置为1000.如果点数超过turbo阈值，则不会绘制图表。

你可以通过尝试渲染小于1000且点数超过1000的点来对齐。

所以设置

plotOptions: {
   series: {
       turboThreshold: 10000
   }
}

如果您的值不超过10000。这应该工作。尝试一次。

添加新行后，折线图会消失

1 个答案: