Grafana 中的散点图

Posted

技术标签:

【中文标题】Grafana 中的散点图【英文标题】：Scatter plots in Grafana 【发布时间】：2019-10-24 10:11:55 【问题描述】：

我正在使用 dockerized grafana 为历史数据创建仪表板。我在 grafana 图形面板中看不到散点图选项。

我想使用散点图来显示时间间隔范围内的数据点。我同样希望能够获取/显示选定间隔的数据点数量，例如 30 分钟、60 分钟等。

【问题讨论】：

您可能对grafana.com/grafana/plugins/natel-plotly-panel/github.com/NatelEnergy/grafana-plotly-panel感兴趣。 第二个用于情节面板。做你在 q 中所说的，等等。 这个 6 年前的未解决问题描述了 Grafana 的功能请求，特别是非时间 X 轴：github.com/grafana/grafana/issues/202 【参考方案1】：

编辑：

至于 Grafana v7.4 有一个新的 XY 统计面板：

年长的非真正回答

使用标准图形面板时，可以选择“点”并取消选择“线”。

如果您进行系列覆盖，您也可以将其与线条混合：

这可以在 https://play.grafana.org/d/000000016/graph-styles?tab=visualization&orgId=1&fullscreen&edit&panelId=17 的公共 Grafana 实例上看到。关于每个周期的计数，我不确定这是否可以在 Grafana 本地完成，但可能取决于您使用的数据源。

【讨论】：

我知道图表面板的“点”选项，但是，它不能满足工作。 我相信 OP 使用“散点图”这个词来表示 x 轴不一定是时间的图，例如cpu 负载与数据库命中的 x-y 图，而不是基于时间的 cpu 负载和数据库命中趋势。 如果您使用 XY 图表，请确保限制数据源中的数据点数量，例如1000.还要按X轴值升序对数据点进行排序，否则图表会被截断。 有谁知道 Grafana 8（在我的情况下为 8.2.3）中的 XY 图表发生了什么？我找不到它。找到this useful Scatter plugin，但我正在寻找 XY 图/散点图中的对数 x 轴。【参考方案2】：

在我的 Grafana (v8.2.3) 实例中，我找不到另一个回复中提到的“XY 图表”，但我发现了不同的其他选项：

    "Scatter" Plugin by Michael Moore：可能是最简单的一个，但相当基本。 "Plotly" Plugin by Natel Energy：更高级，甚至还有使用Plotly（javascript？）库的 3D 散点图（以及更多）。 "Plotly panel" Plugin by AE3E：使用相同的库，但这个插件比 GUI 少，多于编码接口，所以你输入 JSON 和 JavaScript 代码来生成绘图 - 更困难但也非常灵活，一旦你弄清楚它是如何实现的作品。插件和 GitHub 页面上几乎没有给出示例，因此请查看 Plotly 文档。

示例

0。安装：

所有插件的安装都类似，并在每个插件页面的“安装”选项卡中进行了描述。这可能取决于您的安装（例如，我不知道在使用 docker 时它是如何工作的），但在我的“常规”Grafana 安装的情况下，我可以将其输入控制台（例如通过 SSH）：

sudo grafana-cli plugins install michaeldmoore-scatter-panel
sudo grafana-cli plugins install natel-plotly-panel
sudo grafana-cli plugins install ae3e-plotly-panel
sudo systemctl restart grafana-server
sudo systemctl status grafana-server

（选择您要安装的插件，重新启动 Grafana 服务器并检查其状态（应为绿色且没有错误）。提示： 保存仪表板以防您在重新启动 Grafana 之前进行更改，如重新启动 Grafana 服务器将删除未保存的仪表板。）

1。分散插件：

在 Grafana 仪表板中添加一个新面板并选择“Scatter”可视化/面板。 从“表格视图”开始，查看您是否收到有效结果： 从数据库中至少选择 2 个字段（您可以使用标签，但删除字段的聚合器/选择器）。要选择第二个字段，请点击第一个字段旁边的“+”图标，向下滚动并选择“字段 > 字段”。 同时删除“分组依据”。 格式为“表格”

您应该会在时间戳旁边看到两列。

（点击here查看大图）

现在从“表格视图”切换回图表，并在设置的右侧进行调整：

X 轴 > X 轴字段：选择两个字段之一 Y 轴 > 字段：选择其他字段

可能看起来像这样：

（点击here查看大图）

2。 Plotly 插件（Natel）：

与 Scatter 插件类似地准备数据。可能看起来像这样：

（点击here查看大图）

（点击here查看大图）

注意：至少在我的版本中，当我更改设置时面板没有刷新。在表格和图表视图（图表上方的“表格视图”选择器）之间切换以重建面板。

3。 Plotly 面板插件 (AE3E)：

与 Scatter 插件类似地准备数据。 （我还添加了在悬停数据点时在工具提示中使用的第三个字段。）

可能是这样的：

（点击here查看大图）

用于截图的代码：

数据部分：

[
  
    "line": 
      "color": "rgba(255,255,255,255)",
      "width": 1
    ,
    "mode": "lines",
    "type": "scatter"
  
]

对于“颜色”，也可以使用“绿色”、“红色”等。使用 rgba() 时，第一个值是红色 (0-255)，第二个是绿色，然后是蓝色，最后一个 alpha 通道（0 完全透明，255 完全不透明）

布局部分：


  "annotations": [
    
      "showarrow": false,
      "text": "-ImZ [mΩ]",
      "textangle": -90,
      "x": -0.03,
      "xanchor": "right",
      "xref": "paper",
      "y": 0.5,
      "yanchor": "right",
      "yref": "paper"
    ,
    
      "showarrow": false,
      "text": "ReZ [mΩ]",
      "x": 0.5,
      "xanchor": "top",
      "xref": "paper",
      "y": -0.07,
      "yanchor": "top",
      "yref": "paper"
    
  ],
  "font": 
    "color": "darkgrey"
  ,
  "margin": 
    "b": 40,
    "t": 15
  ,
  "paper_bgcolor": "rgba(0,0,0,0)",
  "plot_bgcolor": "rgba(0,0,0,0)",
  "xaxis": 
    "autorange": false,
    "gridcolor": "rgba(128,128,128,255)",
    "range": [
      0,
      90
    ],
    "type": "linear"
  ,
  "yaxis": 
    "autorange": false,
    "gridcolor": "rgba(128,128,128,255)",
    "range": [
      -50,
      20
    ],
    "type": "linear"
  ,
  "hovermode": "closest"

配置部分：（未更改）


  "displayModeBar": false

脚本部分：

// console.log(data)
var trace = 
  x: data.series[0].fields[1].values.buffer,
  y: data.series[0].fields[2].values.buffer,
  text: data.series[0].fields[3].values.buffer,
  mode: 'lines+markers',
  type: 'scatter',
  hovertemplate: 'Re: %x:.4f mΩ | Im: %y:.4f mΩ @ %text:.2f Hz'
;
  
return data:[trace];

确保选择字段 1 和 2 以获得 XY 图。默认情况下，选择 0 和 1，这将产生规则的时间序列图。我包含了第三个数据集（频率）并将其添加到文本变量中，以便在悬停数据点时将其显示在工具提示中。

点击脚本部分：

// console.log(data)
window.updateVariables(query:'var-project':'test', partial: true)

【讨论】：

以上是关于Grafana 中的散点图的主要内容，如果未能解决你的问题，请参考以下文章

Excel中如何正确地画XY散点图

pandas散点图-plot.scatter

r 散点图散点图R.

R数据可视化初阶-散点图散点图矩阵相关系数

R语言可视化：散点图散点图和折线图（line charts）3D散点图旋转3D散点图气泡图corrgram包可视化相关性矩阵马赛克图（ Mosaic plots）hexbin密度图

根据 Seaborn 中的散点图绘制热图