时间序列可视化是将时间序列数据可视化为图表的默认和主要方式。它们可以将序列呈现为线条、点或条形图。它们用途广泛，几乎可以显示任何时间序列数据。此公共演示仪表板包含许多不同的示例，说明如何配置和风格化时间序列可视化。
注意：您可以从旧的图形可视化迁移到新的时间序列可视化。要进行迁移，请打开面板并单击侧窗格中的“Migrate”按钮
下面通过一个简单的示例来介绍如何快速创建时间系列，并且了解时间系列的数据格式。
注意：我了模拟数据，我们使用 MySQL 作为数据源。
假设我们有一个名为 time_series_data 的数据表，它包含两个字段：timestamp 和 value。
timestamp 字段用于存储时间戳，表示数据点的时间。
value 字段用于存储实际的数据值。
这个表可以用来记录某个指标（比如服务器负载、温度、网站访问量等）随时间的变化情况。创建数据表的 SQL 如下：
CREATE TABLE time_series_data ( timestamp TIMESTAMP, value FLOAT );
向数据表中插入几条示例数据：
INSERT INTO `time_series_data` (`timestamp`, `value`) VALUES ('2024-06-01 19:22:59', 89);
INSERT INTO `time_series_data` (`timestamp`, `value`) VALUES ('2024-06-01 19:23:23', 78);
INSERT INTO `time_series_data` (`timestamp`, `value`) VALUES ('2024-06-01 19:23:53', 74);
INSERT INTO `time_series_data` (`timestamp`, `value`) VALUES ('2024-06-01 19:24:02', 34);
INSERT INTO `time_series_data` (`timestamp`, `value`) VALUES ('2024-06-01 19:24:10', 67);
INSERT INTO `time_series_data` (`timestamp`, `value`) VALUES ('2024-06-01 19:24:20', 94);接下来我们就在 Grafana 中创建 MySQL 数据源，选择 Mysql 数据源：
然后编写一个 SQL 语句查询上面的数据，根据数据生成时间序列图标，例如：
上图中，选择 mysql 作为数据源，然后编写一个简单 select 语句，查询时间错和值，最后点击“Run query”按钮查询数据，展示图标。
注意：点击查询后，可能看不见数据，这是由于时间范围太小了，点击“Zoom to data”按钮即可，如下图：
通过本实例，我们可以清除看到时间系列图标的数据结构非常简单，就是一张拥有时间列和数字列的二维表，例如：
Tooltip 选项可控制悬停在图表数据点上时显示的信息叠加。如下图：
将光标悬停在可视化上时，Grafana 可以显示工具提示。选择工具提示的行为方式。
Single - 悬停工具提示只显示单个系列，即您在可视化上悬停的系列。
All - 悬停工具提示会显示可视化中的所有系列。Grafana 会在工具提示的系列列表中以粗体显示悬停的系列。
Hidden - 与可视化互动时不显示工具提示。
图例选项可控制显示在图表下方或右侧的系列名称和统计数据。如下图：
使用这些设置可定义图例在可视化中的显示方式。有关图例的更多信息，请参阅配置图例。
List - 以列表形式显示图例，这是图例的默认显示模式。
Table - 以表格形式显示图例。
Hidden - 隐藏图例。
选择显示图例的位置。
Bottom - 图表下方。
Right - 图表右侧。
选择要在图例中显示的标准计算值，可以有多个。
使用该选项可定义如何显示时间序列数据。您可以使用重载在同一图表中组合多种样式。
Lines
Bars
Points
设置 Bar 图相对于数据点的位置。在下面的示例中，“Show points” 被设置为 “Always”，这样更容易看出该设置的不同之处。点不会改变，条形图与点的关系会改变。
Before 
条形图绘制在点之前。点位于条形图的尾角。
Center 
条形图围绕点绘制。点位于条形图的中心，这是默认设置。
After 
条形图绘制在点之后，点位于条形图的前角。
如下图：
线宽是一个滑块，用于控制系列线的粗细或条形图的轮廓。
使用不透明度指定系列区域的填充颜色。
渐变模式指定基于系列颜色的渐变填充。要更改颜色，请使用标准配色方案字段选项。更多信息，请参阅配色方案。
None: 无渐变填充。这是默认设置。
Opacity: 不透明度梯度，随着 Y 轴值的增加，填充的不透明度也随之增加。
Hue: 基于系列颜色色调的微妙渐变。
Scheme: 由色彩方案定义的渐变色。该设置用于填充区域和线条。有关方案的更多信息，请参阅方案渐变模式。
渐变外观受填充不透明度设置的影响。下图显示，填充不透明度设置为 50。
您可以配置将点添加到线条或条形图中。
Auto：Grafana 会根据数据密度决定是否显示点。如果密度较低，则会显示点。
Always：无论数据集的密度如何，都显示点。
Never：不显示点。
上图中绿色的点就通过该选项控制。
设置点的大小，直径从 1 到 40 像素不等。
上图将点的直径设置为 9 像素。
该选项控制图形如何插值系列线。
Linear（第一个选项）：点与点之间用直线连接。
Smooth（第二个选项）：点与点之间用曲线连接，使点与点之间的过渡更加平滑。
Step before（第三个选项）：线条显示为点与点之间的阶梯，点显示在步长的末端。
Step after（第四个选项）：线条显示为点与点之间的阶梯，点显示在步长的起点。
设置线条的样式。要更改颜色，请使用标准配色方案字段选项。
Solid：显示实线。这是默认设置。
Dash：显示虚线。选择该选项后，会出现一个列表，供您选择虚线的长度和间距（长度、间距）。虚线间距设置为 10，10（默认值）。
Dots：显示虚线。选择该选项后，会出现一个列表供您选择点间距的间隙（长度 = 0，间隙）。点间距设置为 0、10（默认值）
选择空值（即数据中的间隙）在图表中的显示方式。空值可以连接成一条连续的线，也可以设置一个阈值，超过该阈值，数据中的空隙就不再连接。
Never：数据中存在间隙的时间序列数据点永远不会被连接起来。
Always：有间隙的时间序列数据点总是相连的。
Threshold：指定一个阈值，超过该阈值的数据间隙不再连接。当数据中连接的间隙大小已知和/或在已知范围内，且超出此范围的间隙不应再连接时，这可能会很有用。
选择是否设置一个阈值，超过该阈值的数据值将被断开连接。
Never：数据中的时间序列数据点永远不会断开。
Threshold：指定一个阈值，超过该阈值的数据值将断开连接。当数据中的所需值是已知大小和/或在已知范围内，而超出此范围的值不应再连接时，这可能会很有用。
堆叠允许 Grafana 将序列显示在彼此之上。在可视化中使用堆叠时要谨慎，因为它很容易生成误导性图表。有关堆叠可能不是最佳方法的更多信息，请参阅堆叠的问题。
Off：关闭系列堆叠。关闭时，所有系列在可视化中共享同一空间。
Normal：将系列堆叠在一起。
100%：按百分比堆叠，所有系列加起来等于 100%。
坐标轴类别下的选项可更改 X 轴和 Y 轴的渲染方式。有些选项在单击正在编辑的字段选项框外才会生效，您也可以按回车键。
设置沿 x 轴显示的所需时区。
选择 Y 轴的位置。
Auto：自动将 Y 轴分配给系列。如果有两个或更多单位不同的系列，Grafana 会将左轴分配给第一个单位，将右轴分配给后面的单位。
Left：在左侧显示所有 y 轴。
Right：在右侧显示所有 y 轴。
Hidden：隐藏所有轴。
注意：要选择性地隐藏坐标轴，请添加针对特定字段的覆盖字段。
设置 Y 轴文本标签。如果有多个 Y 轴，则可以使用覆盖字段来指定不同的标签。
设置坐标轴的固定宽度。默认情况下，Grafana 会动态计算坐标轴的宽度。
通过设置坐标轴的宽度，不同坐标轴类型的数据可以共享相同的显示比例：通过这种设置，您可以更轻松地比较多个图表的数据，因为坐标轴不会在可视范围内相互移动或拉伸。
设置坐标轴网格线可见度。
Auto：根据数据密度自动显示网格线。
On：始终显示网格线。
Off：从不显示网格线。
设置坐标轴的颜色。
Text：根据主题文本颜色设置颜色。
Series：根据系列颜色设置颜色。
设置坐标轴边框的可见性。
设置 Y 轴数值比例。
Linear：将刻度分成等分。
Logarithmic：使用对数刻度。选择该选项后，会出现一个列表，供您选择二进制（基数 2）或普通（基数 10）对数刻度。
Symlog：使用对称对数刻度。选择该选项后，会出现一个列表供您选择二进制（基数 2）或普通（基数 10）对数刻度。线性阈值选项允许您设置刻度从线性变为对数的阈值。
设置 Y 轴以零为中心。
设置软最小值或软最大值选项，以便更好地控制 Y 轴限制。默认情况下，Grafana 会根据数据集自动设置 Y 轴的范围。
软最小值和软最大值设置可以防止数据中的微小变化被放大，因为数据大部分是平的。相比之下，硬最小值和最大值则有助于防止通过剪切特定点上的间歇性峰值来掩盖数据中有用的细节。
要定义 Y 轴的硬限制，请设置标准最小/最大选项。更多信息，请参阅配置标准选项。
使用该选项可转换序列值，但不会影响工具提示、右键菜单或图例中显示的值。
Negative Y 转换：将结果翻转为 Y 轴上的负值。
Constant：将第一个值显示为一条常量线。
注意：Transform 选项只能作为覆盖（Overrides）选项使用。
在某些情况下，您可能希望显示多个 y 轴。例如，如果您有一个数据集同时显示随时间变化的温度和湿度，您可能希望为这两个序列显示两个单位不同的 y 轴。
您可以通过添加覆盖字段来实现这一目的。请根据需要多次执行上述步骤，添加所需的任意多个 Y 轴。
点击“Standard options”选项，选择“Color scheme”：
默认情况下，图表使用标准颜色方案选项来指定系列颜色。您也可以使用图例，通过单击图例系列颜色图标打开颜色选择器。以这种方式设置颜色会自动创建一个覆盖规则，为特定系列设置特定颜色。
最常见的设置是为图表使用经典调色板。这种方案会根据每个字段或序列的顺序自动为其指定颜色。如果查询中字段的顺序发生变化，颜色也会随之改变。您可以使用覆盖规则为特定字段手动配置颜色。
使用该模式可指定颜色。也可以单击图例中每个系列旁边的彩色线图标，打开颜色选择器。这会自动创建一个新的覆盖，将配色方案设置为单一颜色和所选颜色。
如果您选择了按值着色方案，如从阈值（按值）或 Green-Yellow-Red（按值），则会出现按值着色系列选项。该选项可控制使用哪个值（Last、Min、Max）来为系列指定颜色。
图形样式下的渐变模式选项有一个名为 "Scheme" 的模式。启用 "Scheme" 后，线条或条形图将获得由所选颜色方案定义的渐变色。
From thresholds
如果将颜色方案设置为从阈值（按值），并将渐变模式设置为Scheme，那么当线条或条形图越过定义的阈值时，它们的颜色就会改变。
下图显示已启用条形图模式：
Gradient color schemes
下图显示的是选择了 Green-Yellow-Red（按值）配色方案选项的折线图。
下图显示的是选择了 Green-Yellow-Red（按值）配色方案选项的条形图：
川公网安备51010802032098
