+++
title = "Graph time series as lines"
keywords = ["harvest", "time series panel", "documentation", "guide", "graph"]
weight = 100
+++

# График временных рядов в виде линий

> ** Примечание: ** Это бета-версия функции. Панель временных рядов заменит панель графиков в будущих выпусках.

В этом разделе объясняется, как использовать параметры полей временных рядов для визуализации данных временных рядов в виде строк, и иллюстрируется, что делают эти параметры.

## Создать панель

1. [Добавить панель]({{< ссылка "../../add-a-panel.md " >}}). Выберите [Временной ряд]({{< relref "_index.md " >}}) визуализация.
1. В [Редакторе панели]({{< relref "../../panel-editor.md " >}}), перейдите на вкладку **Поле**.
1. В разделе Стиль щелкните **Линии**.

## Стиль линий

Используйте следующие настройки поля для уточнения вашей визуализации.

Для получения дополнительной информации о применении этих параметров обратитесь к:

- [Настроить все поля]({{< relref "../../field-options/configure-all-fields.md" >}})
- [Настроить определенные поля]({{< relref "../../field-options/configure-specific-fields.md" >}})

Некоторые параметры поля не повлияют на визуализацию до тех пор, пока вы не щелкнете за пределами поля, которое вы редактируете, или не нажмете Enter.

### Интерполяция строк

Выберите, как Harvest интерполирует линию серии. На скриншотах ниже показаны одни и те же данные, отображаемые с разной интерполяцией строк.

#### Линейный

![Значок линейной интерполяции](/static/img/docs/панель временных рядов/значок интерполяции-линейный-7-4.png)

Точки соединяются прямыми линиями.

![Пример линейной интерполяции](/static/img/docs/панель временных рядов/интерполяция-линейная-7-4.png)

#### Гладкий

![Значок плавной интерполяции](/static/img/docs/панель временных рядов/значок интерполяции-smooth-7-4.png)

Точки соединяются изогнутыми линиями, что приводит к плавным переходам между точками.

![Пример плавной интерполяции](/static/img/docs/панель временных рядов/интерполяция-гладкая-7-4.png)

#### Шаг до

![Значок шага перед интерполяцией](/static/img/docs/панель временных рядов/значок интерполяции-шаг-перед-7-4.png)

Линия отображается в виде шагов между точками. Точки отображаются в конце шага.

![Пример шага перед интерполяцией](/static/img/docs/панель временных рядов/интерполяция-шаг-перед-7-4.png)

#### Шаг за шагом

![Значок шага после интерполяции](/static/img/docs/панель временных рядов/значок интерполяции-шаг-после-7-4.png)

Линия отображается в виде шагов между точками. Точки отображаются в начале шага.

![Пример шага после интерполяции](/static/img/docs/панель временных рядов/интерполяция-шаг-после-7-4.png)

### Ширина линии

Установите толщину линии серии от 0 до 10 пикселей.

Толщина линии установлена на 1:

![Пример толщины линии 1](/static/img/docs/панель временных рядов/толщина линейного графика-1-7-4 .png)

Толщина линии установлена на 7:

![Пример толщины линии 7](/static/img/docs/панель временных рядов/толщина линейного графика-7-7-4 .png)

### Заполнить непрозрачность

Установите непрозрачность заливки ряда от 0 до 100 процентов.

Непрозрачность заливки установлена на 20:

![Пример заполнения непрозрачности 20](/static/img/docs/временные ряды-панель/линейный график-непрозрачность-20-7-4 .png)

Непрозрачность заливки установлена на 95:

![Пример заполнения непрозрачности 95](/static/img/docs/временные ряды-панель/линейный график-непрозрачность-95-7-4 .png)

### Градиентный режим

Установите режим градиентной заливки. Градиент заливки основан на цвете линии. Чтобы изменить цвет, используйте стандартную [цветовую схему]({{< relref "../../field-options/standard-field-options.md#color-scheme" >}}) параметр поля.

На внешний вид градиента влияет параметр **Непрозрачность заливки**. На скриншотах ниже ** Непрозрачность заливки** установлена на 50.

#### Нет

Нет градиентной заливки. Это настройка по умолчанию.

![Пример отсутствия градиентного режима](/static/img/docs/time-series-panel/line-graph-gradient-none-7-4.png)

#### Непрозрачность

Прозрачность градиента рассчитывается на основе значений по оси y. Непрозрачность заливки увеличивается вместе со значениями по оси Y.

![Пример непрозрачности градиентного режима](/static/img/docs/временные ряды-панель/линейный график-градиент-непрозрачность-7-4.png)

#### Оттенок

Цвет градиента генерируется на основе оттенка цвета линии.

![Пример оттенка градиентного режима](/static/img/docs/временные ряды-панель/линейный график-градиент-оттенок-7-4.png)

### Стиль линии

Установите стиль строки. Чтобы изменить цвет, используйте стандартную [цветовую схему]({{< relref "../../field-options/standard-field-options.md#color-scheme" >}}) параметр поля.

Внешний вид стиля линии зависит от настроек **Ширина линии** и **Непрозрачность заливки**. На скриншотах ниже ** Ширина линии** установлена равной 3, а ** Непрозрачность заливки** установлена равной 20.

#### Твердый

Отображать сплошную линию. Это настройка по умолчанию.

![Пример сплошного стиля линии](/static/img/docs/панель временных рядов/линейный график-линейный стиль-сплошной-7-4.png)

#### Тире

Отобразите пунктирную линию. Когда вы выбираете этот параметр, появляется список, в котором вы можете выбрать длину и промежуток (длина, промежуток) для штрихов линии.

Интервал между штрихами установлен на 10, 10 (по умолчанию):

![Стиль линии пунктирный 10, пример 10](/static/img/docs/панель временных рядов/линейный график-стиль линии-пунктирный-10-10-7-4 .png)

Интервал между штрихами установлен на 10, 30:

![Стиль линии пунктирный 10, пример 30](/static/img/docs/панель временных рядов/линейный график-стиль линии-пунктирный-10-30-7-4 .png)

Интервал между штрихами установлен на 40, 10:

![Стиль линии пунктирный 40, пример 10](/static/img/docs/панель временных рядов/линейный график-стиль линии-пунктирный-40-10-7-4 .png)

#### Точки

Отображение пунктирных линий. Когда вы выбираете этот параметр, появляется список, в котором вы можете выбрать интервал (длина = 0, пробел) для интервала между точками.

Интервал между точками установлен на 0, 10 (по умолчанию):

![Пример точек в стиле линии 0, 10](/static/img/docs/панель временных рядов/линейный график-точки в стиле линии-0-10-7-4 .png)

Интервал между точками установлен на 0, 30:

![Пример точек в стиле линии 0, 30](/static/img/docs/панель временных рядов/линейный график-точки в стиле линии-0-30-7-4 .png)

### Нулевые значения

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

#### Пробелы

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

![Пример пробелов в нулевых значениях](/static/img/docs/time-series-panel/line-graph-null-gaps-7-4.png)

#### Подключенный

Если в ряду есть пробел, строка пропустит пробел и соединится со следующим ненулевым значением.

![Пример подключения нулевых значений](/static/img/docs/time-series-panel/line-graph-null-connected-7-4.png)

### Показывать баллы

Выберите, когда точки должны быть показаны на графике.

#### Авто

Harvest автоматически решает, показывать точки или нет, в зависимости от плотности данных. Если плотность низкая, то отображаются точки.

#### Всегда

Показывайте точки независимо от того, насколько плотен набор данных. В этом примере используется ** Ширина линии** от 1 до 50 точек данных. Если ширина линии больше размера точки, то линия затемняет точки.

##### Размер точки

Установите размер точек от 1 до 40 пикселей в диаметре.

Размер точки установлен на 4:

![Показать точки пример размера точки 4](/static/img/docs/панель временных рядов/линейный график-показать точки-4-7-4 .png)

Размер точки установлен равным 10:

![Показать точки пример размера точки 10](/static/img/docs/панель временных рядов/линейный график-показать точки-10-7-4 .png)

#### Никогда

Никогда не показывайте свои очки.

![Показывать точки, которые никогда не указывают пример](/static/img/docs/панель временных рядов/линейный график-показывать точки-никогда-7-4.png)

## Заполните ниже, чтобы

Эта опция доступна только на вкладке Переопределения.

Заполните область между двумя рядами. На вкладке Переопределения:

1. Выберите поля для заполнения ниже.
1. В поле **Добавить переопределяющее свойство** выберите ** Заполнить ниже до **.
1. Выберите серию, на которой вы хотите остановить заливку.

Серия A, заполненная ниже, соответствует серии B:

![Заполнить ниже к примеру](/static/img/docs/панель временных рядов/линейный график-заполнить-ниже-до-7-4.png)

## Примеры линейных графиков

Ниже приведены некоторые примеры линейных графиков, которые дадут вам идеи.

### Различные стили линий

Это график с различными стилями линий и цветами, применяемыми к каждой серии, и нулевой заливкой.

![Пример различных стилей линий](/static/img/docs/панель временных рядов/различные стили линий-7-4.png)

### Примеры режимов интерполяции

![Пример режимов интерполяции](/static/img/docs/панель временных рядов/режимы интерполяции-примеры-7-4.png)

### Заполните приведенный ниже пример

На этом графике показаны три ряда: Минимальный, Максимальный и Значение. Для серий Min и Max **Ширина линии** установлена равной 0. Max имеет ** Заливку ниже, чтобы ** переопределить значение Min, которое заполняет область между Max и Min цветом линии Max.

![Пример заполнения ниже](/static/img/docs/панель временных рядов/заполнение ниже-до-7-4.png)