0

HIghcharts 无法加载大型 csv 文件，所以我可以使用 papa parse 来增加图表的加载和响应时间吗？

$(function () {
$.get('<%= @wire.attachment %>', function(csv) {
$('#container').highcharts({
    chart: {
        type: 'area',            
        zoomType: 'x',
        spacingBottom: 30
    },
    data: {
        csv: csv
    },
    title: {
        text: '<%= @wire.name %>'
    },
    subtitle: {
        text: ''
    },
    credits: {
        enabled: false
    },

    yAxis: {
        title: {
            text: ''
        }
    }
     })
      });});

我正在使用下面的代码，但没有运气。请仔细阅读代码，看看我是否做错了什么。

<script>
(function() {

//Initializing basic chart configuration object
var chartConfigOptions = {
    title: {
        text: 'Climate Data for Chicago - July 2014'
    },
    subtitle: {
        text: '<a href="http://www.ncdc.noaa.gov" target="_blank">NCDC</a>',
        useHTML: true
    },
    chart: {
        type: 'column'
    },
    tooltip: {
        valueSuffix: '&deg;F',
        useHTML: true
    },
    plotOptions: {
        line: {
            pointStart: Date.UTC(2014, 06, 01, 00, 00, 00),
            pointInterval: 3600 * 1000 * 24
        }
    },
    xAxis: {
        title: {
            text: 'Date'
        },
        type: 'datetime'
    },
    yAxis: {
        title: {
            text: 'Temperature in &deg;F',
            useHTML: true
        }
    },
    series: []
   };


    //Initializing an empty variable for file DOM object
   var file = '';


    //Beginning the process as soon as the file loads
      $( '#csv_file' ).on( 'change', function( e ) {

    //Getting the file DOM object
    file = e.target.files[0];

            //Checking if Highcharts has been initialized previously on the same       container
      if ( $( '#climate_data' ).highcharts() ) {
        $( '#climate_data' ).highcharts().destroy();
      }

      //Parsing the CSV file
        Papa.parse( file, {
            header: true,
         complete: function( results ) {

            //Looping through the headers
            for ( var i in results.meta.fields ) {

                var name = results.meta.fields[i];

                //Initializing an empty series object
                chartConfigOptions.series[i] = {};

                //Giving the series a name
                chartConfigOptions.series[i].name = name;

                //Initializing an empty array for holding series data
                chartConfigOptions.series[i].data = [];

                //Looping through all the records and pushing records with similar header into an array
                for ( var j in results.data ) {
                    //The current data point
                    var currentDataPoint = results.data[j][name];

                    //Making sure that the data point is an integer, not a string
                    currentDataPoint = parseInt( currentDataPoint );

                    //Pushing the data point to the 'data' array of the current series
                            chartConfigOptions.series[i].data.push( currentDataPoint  );
                }
            }

            //Finally, nitializing the chart
            $( '#climate_data' ).highcharts( chartConfigOptions );
            }
         });
      });

   })();

4

0 回答 0