Загрузка csv-файла в jQuery?

У меня есть файл CSV, который я хотел бы использовать в качестве исходных данных для графика jQuery flot.

Я:

  1. найти плагин jQuery, который будет загружать файл CSV напрямую?
  2. преобразовать файл CSV в JSON и использовать его?
  3. сделать что-то совершенно другое?

Мне не очень повезло найти плагин jQuery, который может справиться с внешним CSV-файлом, но, возможно, мне чего-то не хватает.

8
csv flot jquery

2 ответов

используйте плагин jQuery CSV для получения массива. Постройте / отсортируйте массив, как вам нужно для диаграммы.

jQuery CSV плагин

Мне только что пришло в голову, что вы можете подумать о чтении плоского CSV-файла с jQuery. Это невозможно. Предоставление доступа javascript к файловой системе звучит как ужасная идея. Вы всегда можете использовать $.get() для загрузки файла на сервер, однако.

5

сервер не требуется...

это может быть достигнуто без сервера, если вы используете немного изобретательности.

вам понадобятся 2 вещи:

библиотека парсеров jQuery-csv специализируется на разборе RFC 4180 совместимый CSV, со многими возможностями выше и помимо простого преобразования данных CSV в данные JavaScript. Для этой демонстрации мы будем использовать две функции:

первым является метод toArrays (). Он принимает многострочную строку CSV и преобразует ее в 2D-массив.

второй-определяемый пользователем крючок парсера, который автоматически преобразует выходные данные (все строки) в скалярные (т. е. целочисленные/float) данные. В принципе, благодаря использованию функции обратного вызова можно встроить дополнительные обработка в парсер.

как только у вас есть данные CSV, назначенные строковой переменной, преобразование в данные JavaScript очень просто.

var csv = "" // this is the string containing the CSV data
var data = $.csv.toArray(csv, {
  onParseValue: $.csv.hooks.castToScalar
});

это все для шага синтаксического анализа CSV.

теперь Flot ожидает массив 2D-массивов, где каждый 2D-массив содержит независимый набор данных.

для создания данных сначала создайте пустой массив:

var flotData = [];

затем для каждого набора данных, создаваемого С помощью CSV вы просто добавляете набор данных в коллекцию.

var flotData.push(data);

обработка файлов через HTML5-сложная тема, потому что она использует асинхронные обратные вызовы для загрузки файлов; это означает отсутствие операторов возврата. Чтобы все было просто, я просто сделаю график флота глобальным объектом.

сначала инициализируйте сюжет во время $(document).ready():

var data = [];
flot = $.flot($('#plotdiv'), data, options);

Примечание: добавлен фиктивный объект данных, поэтому график может быть инициализированный.

затем добавьте обработчик файл:

// handles csv files
function handleFileSelect(evt) {
  var files = evt.target.files; // FileList object

  // reset the flot dataset
  flot.setData([]);
  for(var i=0, len=files.length; i<len; i++) {
    flotFileData(files[i], i);
  }
}

предположим, что это может загрузить один или несколько файлов данных CSV. Это вызывается после выбора файлов в диалоговом окне файл. Данные сбрасываются на пустые (т. е. []), потому что мы хотим начать заново после каждого запуска диалогового окна файла; в противном случае вы будете добавлять к предыдущему набору данных.

это будет цикл через файлы и вызов flotFileData() для каждого файла, который был выбранный в диалоговом окне файл..

вот код для обработки обратного вызова открытия файла:

function flotFileData(file, i) {
  var reader = new FileReader();
  reader.readAsText(file);
  reader.onload = function(event){
    var csv = event.target.result;
    var newData = $.csv.toArrays(csv, {
      onParseValue:$.csv.hooks.castToScalar
    });
    var data = flot.getData();
    data[i] = newData;
    flot.setData(data);
    flot.setupGrid();
    flot.draw();
  };
  reader.onerror = function(){ alert('Unable to read ' + file.fileName); };
}

эта функция считывает файл как обычный текст и делает содержимое доступным через событие.цель.результат. Анализатор CSV преобразует CSV в скалярные данные в виде двумерного массива. Для стека нескольких наборов данных нам нужно добавить данные, которые уже есть на графике, поэтому сначала нам нужно сохранить существующие данные через flot.метод GetData.)( Добавьте новые данные, установите их через флот.setData () и, наконец, повторно нарисовать сюжет.

Примечание: Если диапазоны графика не нужно пересчитывать, вы можете пропустить флот.вызов setupGrid ().

В идеале, перерисовка должна происходить только один раз на этапе загрузки файла, но эта демонстрация еще не оптимизирована. Это означает, что график будет перерисован для каждого файла, который читается (определенно не идеально).

если вы хотите увидеть его в действии, взгляните на 'Flot Демонстрация ' предоставлено проектом jQuery-csv. Я предлагаю вам попробовать загрузить оба analytics1.csv и analytics2.наборы данных csv, чтобы вы могли видеть, как они накладываются на график.

если вы решили перейти на серверный маршрут для загрузки файлов CSV, есть также более простой пример, который демонстрирует загрузку CSV из текстового поля.

отказ от ответственности: я автор jQuery-csv.

обновление:

из-за опалубка кода Google,jQuery-csv был перемещен в GitHub

11