График из таблицы: один HTML-файл для браузера

График из таблицы нужен, когда числа уже лежат в Excel или CSV, а показать их удобнее живой диаграммой вместо скриншота. Картинка PNG не даёт подсказок при наведении и плохо живёт в письме. Ссылка на чужой сервис тянет регистрацию у получателя. Один файл .html открывается в любом браузере: навели курсор и увидели значение, интернет у получателя не обязателен. На Тулси откройте график одним файлом: вставьте таблицу, выберите столбцы, линию или круг, смотрите превью. Скачать файл и сохранить в кабинет можно на тарифе Про. Ниже: зачем уходить от скриншота, как подготовить CSV, путь в инструменте, проверка результата и соседние конвертеры CSV в Excel и XLSX в Markdown. В конце десять частых вопросов.

Почему скриншот и встроенный график Excel не закрывают задачу

Вы построили диаграмму в Excel и отправили снимок экрана. Получатель видит картинку без подписей при наведении. В письме картинка сжимается, в мессенджере обрезается. Через месяц исходная книга лежит у вас, а у коллеги остаётся только PNG без чисел.

Встроенный график Excel живёт внутри .xlsx. Коллега без Excel Online или десктопа открывает файл с трудом. Вставка графика в слайд снова превращает его в картинку. Для блога и рассылки нужен формат, который открывается двойным кликом в браузере.

Сервисы «построить график из csv в облаке» решают превью, но создают зависимость: аккаунт, срок хранения ссылки, политика данных. Если отчёт с выручкой нельзя светить на чужом диске, облачная диаграмма не подходит.

Один локальный HTML держит и отрисовку, и числа внутри файла. Получатель открыл файл и увидел график. Отдельный сайт и логин ему не нужны.

Где ломается обмен «картинкой графика»

В чате качество падает: подписи оси сливаются, легенда читается с лупой. В печатном PDF теряется интерактив. Руководитель просит «точное число за март», а на скрине его нет, только столбцы на глаз.

Повторная правка тоже боль. Изменили одну ячейку в таблице: снова стройте диаграмму, снова снимайте экран, снова шлите файл. Цепочка короче, если таблица и сборка файла стоят рядом.

Чем HTML-файл отличается от ссылки на сервис

Ссылка ведёт на чужой хостинг. Завтра сервис сменит тариф, удалит черновик или попросит вход. HTML у вас на диске и у получателя в почте: открыли офлайн, увидели то же превью.

В файле Тулси нет внешних скриптов с CDN. Браузер рисует график из содержимого самого файла. Это удобно в командировке без Wi-Fi и в среде, где внешние скрипты режет политика безопасности.

Что можно сделать самому до Тулси

Сначала решите, нужен ли интерактив. Для одноразовой печати хватает графика в Excel и экспорта в PDF. Для письма руководителю с вопросом «сколько было в апреле» лучше файл, где число видно по наведению.

Ручной путь без сайта: скопировать числа в Google Таблицы, вставить диаграмму, опубликовать в интернет. Минус тот же: публикация и доступ. Либо нарисовать SVG руками: долго и бессмысленно для ежемесячного отчёта.

Если таблица уже в CSV с кривой кодировкой, сначала приведите файл в порядок. Иначе подписи оси приедут иероглифами, и график станет нечитаемым ещё до выбора типа диаграммы.

Excel и Google Таблицы как черновик

В Excel удобно чистить дубли, считать итоги и проверить, что в столбце только числа. Готовый фрагмент копируйте и вставляйте в поле на Тулси: разделитель «таб» из Excel обычно читается сразу.

В Google Таблицах «Скачать → CSV» даёт файл с запятой. Его можно открыть в блокноте и вставить текст целиком. Либо скопировать диапазон и вставить: часто уходит табуляция между ячейками.

Когда хватает Markdown-таблицы без графика

В заметках Obsidian и README иногда нужна сетка чисел без диаграммы. Тогда берите XLSX в Markdown: книга станет текстовой таблицей для репозитория. График HTML закрывает другой сценарий: показать динамику глазами, без чтения каждой строки.

Оба формата можно держать рядом: Markdown для архива в git, HTML для письма и созвона.

Как подготовить таблицу или CSV перед сборкой

Парсер на странице ждёт простую сетку. Первая строка: заголовки. Первый столбец: подписи (месяцы, города, категории). Со второго столбца идут числа рядов. Пример из демо на сайте: Месяц;Продажи;План и строки вроде Янв;42;40.

Разделитель: точка с запятой, запятая или табуляция. Смотрите первую строку: какой символ стоит между заголовками, тот и используйте по всему фрагменту. Смешивать ; и , в одном куске нельзя.

Числа можно писать с запятой как десятичным знаком (12,5): инструмент приводит их к точке при разборе. Пробелы в тысячах лучше убрать заранее (1 250 → 1250), иначе значение может стать нулём.

Формат строк, который читается с первого раза

Две колонки минимум: подпись и одно число. Для сравнения плана и факта добавьте второй числовой столбец. Пустые строки в середине выкиньте. Вторую «шапку» посреди данных не оставляйте: она попадёт в подписи оси.

Для круговой диаграммы берите один числовой столбец и 3-8 категорий. Больше крупных долей инструмент схлопывает в «Прочее». Длинный ряд по месяцам лучше отдать столбцам или линии.

Типичные ошибки в исходнике

Вставили итог «Всего» как обычную строку: столбец вырастает выше остальных и искажает шкалу. Вынесите итог из диапазона для графика.

Смешали текст и число в одной ячейке (около 40). Парсер получит ноль. Оставьте чистое число, пояснение держите в названии графика.

CSV из 1С открыли в Excel и увидели иероглифы. Сначала соберите нормальную книгу через CSV в Excel, разбор кодировки в статье без иероглифов. Потом копируйте уже читаемые ячейки в сборщик графика.

Как пройти путь «таблица → HTML» на Тулси

Откройте Интерактивный график → один HTML. В поле «Название» напишите заголовок, который увидит получатель. В «Таблица данных» вставьте фрагмент из Excel или текст CSV.

Выберите тип: столбцы, линия или круг. Цвет акцента: оранжевый, чёрный, синий или зелёный. Превью под полем обновляется сразу, если таблица разобралась.

Проверьте подписи и высоты столбцов глазами. Если видите сообщение, что таблицу не удалось прочитать, вернитесь к заголовкам и числам. Когда превью устраивает, на тарифе Про нажмите «Скачать .html».

Столбцы, линия и круг: что выбрать

Столбцы сравнивают категории и месяцы рядом. Линия показывает тренд во времени. Круг показывает доли одного показателя: удобно для 3-8 пунктов бюджета или трафика.

Несколько числовых столбцов на столбцах и линии рисуются как отдельные ряды с легендой. На круге берётся первый столбец чисел: второй ряд для долей не нужен.

Превью для всех и скачивание на Про

Превью на странице доступно без оплаты: можно подобрать тип и проверить числа. Кнопки «Скачать .html» и «Сохранить в кабинет» работают на тарифе Про. Лимит кабинета: до 30 графиков, раздел «Мои графики».

Превью и скачивание собираются в браузере на вашем устройстве. Числа на сервер для отрисовки не уходят. Если нажали «Сохранить в кабинет», таблица и настройки остаются в аккаунте Про, чтобы открыть файл снова и поправить.

Как проверить результат и что делать при ошибке

Успех в превью: подписи по оси совпадают с первым столбцом, высоты отражают числа, легенда называет ряды как заголовки. Скачанный файл откройте в Chrome или Firefox двойным кликом: заголовок на месте, при наведении на столбец видно значение.

Неудача «не удалось прочитать таблицу»: нет строки заголовков, один столбец без чисел или пустой фрагмент. Добавьте заголовок и хотя бы одну строку данных.

Неудача «скачивание недоступно»: вы гость или на бесплатном доступе. Оформите Про или останьтесь на превью для проверки идеи. Сообщение на странице прямо говорит, что файл качается на тарифе Про.

Если круг выглядит «кашей» из десяти долей, сократите список или переключитесь на столбцы. Если линия плоская из-за одной гигантской категории «Итого», уберите итог из данных.

Смежные задачи рядом с графиком из CSV

Кривой CSV с кириллицей сначала приведите к .xlsx через CSV в Excel. Пошаговый разбор кодировки и разделителя: CSV в Excel без иероглифов.

Таблицу из книги Excel в текст для заметок и README отдайте в XLSX в Markdown. Хаб «файл → Markdown» рядом, если типы файлов разные: конвертер в Markdown.

Связка по смыслу: почистили выгрузку → при необходимости собрали книгу → из фрагмента чисел собрали HTML-график для письма. Markdown оставляйте для репозитория, HTML для показа динамики.

Частые вопросы

Как построить график из CSV без установки программ?

Вставьте текст CSV или ячейки из Excel на страницу график одним файлом. Выберите тип диаграммы и смотрите превью во вкладке браузера. Устанавливать Excel или редактор кода для просмотра результата не нужно: скачанный .html открывается двойным кликом.

Можно ли сделать график из CSV бесплатно на сайте?

Превью на Тулси бесплатное: вы видите столбцы, линию или круг по своим числам. Скачать готовый .html и сохранить черновик в кабинет можно на тарифе Про. Так вы проверяете идею до оплаты и платите, когда файл реально нужен для отправки.

Чем HTML-график лучше скриншота из Excel?

При наведении видно точное значение. Файл не теряет подписи при сжатии в мессенджере так же, как растровая картинка. Получатель открывает один файл в браузере и не ищет у себя книгу Excel с исходной диаграммой.

Нужен ли интернет тому, кто откроет файл?

Нет. График и скрипт лежат внутри одного HTML. Файл работает офлайн после скачивания. Интернет нужен только вам, пока вы собираете превью на сайте Тулси.

Какие типы графиков доступны?

Три: столбцы, линия и круг (доли). Круг берёт первый столбец чисел и удобен для короткого списка категорий. Для длинного ряда по месяцам выбирайте столбцы или линию.

Данные из таблицы уходят на сервер Тулси?

При превью и скачивании разбор и сборка идут в браузере на вашем компьютере. На сервер числа для отрисовки не отправляются. Исключение: кнопка «Сохранить в кабинет» на Про записывает таблицу в ваш аккаунт, чтобы открыть график позже.

Как вставить таблицу из Excel в инструмент?

Выделите диапазон с заголовком, скопируйте, вставьте в поле «Таблица данных». Обычно между ячейками уходит табуляция, её парсер понимает. Альтернатива: сохраните лист как CSV и вставьте текст файла целиком с разделителем ; или ,.

Почему превью пишет, что таблицу не удалось прочитать?

Чаще всего нет второй строки с числами или в первой строке один столбец без заголовков рядов. Проверьте, что есть подписи слева и хотя бы один столбец чисел справа. Уберите пустые строки и строки «Итого», если они мешают разбору.

Где найти сохранённый график в кабинете?

В личном кабинете откройте раздел «Мои графики». Там можно снова открыть черновик в инструменте, скачать .html или удалить запись. На Про хранится до 30 графиков.

Чем график из CSV отличается от Markdown-таблицы?

Markdown-таблица показывает числа текстом в заметках и git. HTML-график показывает те же числа диаграммой с подсказками. Для архива в репозитории удобнее XLSX в Markdown. Для письма и отчёта «на глаз» удобнее один HTML.

Если CSV открывается иероглифами, сначала пройдите CSV в Excel и статью без иероглифов. Когда сетка читается, соберите диаграмму на график → HTML.