Хобрук: Ваш путь к мастерству в программировании

Флот-диаграмма из таблицы данных

Я хочу построить диаграмму плавучести из таблицы. Таблица построена с помощью плагина jquery datatables. Таблицу можно редактировать в режиме реального времени.

Мне было интересно, есть ли у кого-нибудь советы по отображению данных во флоте. Будете ли вы извлекать данные из json или напрямую из графика для построения флоат-чарта?

Данные заполняются динамически с помощью jquery-плагина datatables.

Таблица выглядит так..

<div id="plotarea">  
    <table>  
        <caption>GDP, based on exchange rates, over time. Values in billion USDs.</caption>  
        <tr>  
            <td></td>  
            <th scope="col">2003</th>  
            <th scope="col">2002</th>  
            <th scope="col">2001</th>  
            <th scope="col">2000</th>  
            <th scope="col">1999</th>  
            <th scope="col">1998</th>  
        </tr>  
        <tr>  
            <th scope="row">USA</th>  
            <td>10,882</td>  
            <td>10,383</td>  
            <td>10,020</td>  
            <td>9,762</td>  
            <td>9,213</td>  
            <td>8,720</td>  
        </tr>  
        <tr>  
            <th scope="row">EU</th>  
            <td>10,970</td>  
            <td>9,040</td>  
            <td>8,303</td>  
            <td>8,234</td>  
            <td>8,901</td>  
            <td>8,889</td>  
        </tr>          
    </table>  
</div>

Спасибо!

javascript datatable jquery flot
13.04.2013

  • как заполняется таблица данных? Можете ли вы опубликовать код? 13.04.2013
  • Данные заполняются динамически с помощью jquery-плагина datatables. 18.04.2013
  • Я имею в виду, исходят ли данные в формате JSON, если да, вы можете опубликовать фрагмент 19.04.2013

Ответы:


1

Вы можете использовать циклы для просмотра вашей таблицы и создания массива данных для флота. Что-то вроде этого:

    var headerTr = $('table tr:first()');
    var rowCount = $('table tr').length - 1;
    var data = [];        

    for (var row = 0; row < rowCount; row++) {
        var tr = $('table tr').eq(row + 1);
        var dataseries = {
            label: tr.find('th').text(),
            data: []
        };
        for (var col = 0; col < tr.find('td').length; col++) {
            var xval = headerTr.find('th').eq(col).text();
            var yval = tr.find('td').eq(col).text().replace(',', '');
            dataseries.data.push([xval, yval]);
        }
        data.push(dataseries);
    };

Вот скрипта с рабочим примером. Рисование запускается нажатием кнопки. Для ваших таблиц данных вы можете изменить это на событие onchange или что-то подобное.

29.04.2015
Новые материалы
Решения DBA Metrix
DBA Metrix Solutions предоставляет удаленного администратора базы данных (DBA), который несет ответственность за внедрение, обслуживание, настройку, восстановление базы данных, а также другие..
Начало работы с Блум
Обзор и Codelab для генерации текста с помощью Bloom Оглавление Что такое Блум? Некоторые предостережения Настройка среды Скачивание предварительно обученного токенизатора и модели..
Создание кнопочного меню с использованием HTML, CSS и JavaScript
Вы будете создавать кнопочное меню, которое имеет состояние наведения, а также позволяет вам выбирать кнопку при нажатии на нее. Финальный проект можно увидеть в этом Codepen . Шаг 1..
Внедрите OAuth в свои веб-приложения для повышения безопасности
OAuth — это широко распространенный стандарт авторизации, который позволяет приложениям получать доступ к ресурсам от имени пользователя, не раскрывая его пароль. Это позволяет пользователям..
Классы в JavaScript
class является образцом java Script Object. Конструкция «class» позволяет определять классы на основе прототипов с чистым, красивым синтаксисом. // define class Human class Human {..
Как свинг-трейдеры могут использовать ИИ для больших выигрышей
По мере того как все больше и больше профессиональных трейдеров и активных розничных трейдеров узнают о возможностях, которые предоставляет искусственный интеллект и машинное обучение для улучшения..
Как построить любой стол
Я разработчик программного обеспечения. Я люблю делать вещи и всегда любил. Для меня программирование всегда было способом создавать вещи, используя только компьютер и мое воображение...