博客gydF4y2Ba/gydF4y2Ba工程gydF4y2Ba

学习Grafana:如何在Grafana 7.0中构建散点图插件gydF4y2Ba

马库斯·奥尔森gydF4y2Ba

•gydF4y2Ba2020年6月24日gydF4y2Ba•gydF4y2Ba8分钟gydF4y2Ba

有很多很棒的事情gydF4y2BaGrafana 7.0gydF4y2Ba，但我最喜欢的功能之一是新的基于react的插件平台，它有一组新的api和设计系统来帮助你构建自己的插件。这个过程比以往任何时候都更容易、更快。gydF4y2Ba

在这篇博文中，我将展示如何创建一个面板插件来可视化散点图。gydF4y2Ba

散点图是一种图形，它将两个变量的值(通常)显示为沿水平轴和垂直轴的一组点。散点图对于确定关系很有用，比如一个国家的GDP和它的预期寿命。gydF4y2Ba

请查看gydF4y2BaGapminder制作的世界健康图表gydF4y2Ba来看看如何使用散点图。(这个图表实际上是一个gydF4y2Ba气泡图gydF4y2Ba-使用每个圆的面积来编码第三个变量的散点图。)gydF4y2Ba

在本教程结束时，你将建立一个散点图，看起来像这样:gydF4y2Ba

注意:gydF4y2Ba这篇文章假设你有基本的知识gydF4y2BaReactJSgydF4y2Ba而且gydF4y2Ba打印稿gydF4y2Ba(或Javascript)。我也建议你完成gydF4y2Ba构建一个面板插件gydF4y2Ba教程，然后再创建自己的。gydF4y2Ba

软件要求:gydF4y2Ba

Docker引擎(或本地安装的Grafana)gydF4y2Ba
NodeJS 12。x LTS(含NPM)gydF4y2Ba

开始gydF4y2Ba

开始为Grafana构建插件的最简单方法是使用gydF4y2Bagrafana-toolkitgydF4y2Ba，一个命令行应用程序，以加快Grafana插件开发。gydF4y2Ba

在您选择的终端上运行以下命令从插件模板创建一个插件:gydF4y2Ba
```
NPX @grafana/toolkit插件:创建散射图gydF4y2Ba
```
在提示符中，选择gydF4y2Ba面板插件gydF4y2Ba从我们的模板中创建一个插件。gydF4y2Ba
导航到新目录，安装依赖项，并构建插件。gydF4y2Ba
```
CD散点图纱线安装纱线开发gydF4y2Ba
```

接下来，您需要告诉Grafana在哪里可以找到您的插件。如果您的机器上已经安装了Grafana，则可以配置gydF4y2Ba插件目录的路径gydF4y2Ba在Grafana配置文件中包含您的插件。然而，在本例中，我们将使用Docker。gydF4y2Ba

使用Docker启动Grafana，使用包含插件的目录挂载在gydF4y2Ba/var/lib/grafana/plugingydF4y2Ba容器内部。gydF4y2Ba
```
docker运行-d -p 3000:3000 -v YOUR_PLUGIN_DIRECTORY:/var/lib/grafana/plugins——name=grafana grafana/grafana:7.0.0gydF4y2Ba
```
浏览到http://localhost:3000，登录并创建一个新的仪表板。步骤类似于在gydF4y2Ba开始gydF4y2Ba．gydF4y2Ba
添加一个新面板，并从列表中选择散点图插件gydF4y2Ba可视化gydF4y2Ba．gydF4y2Ba

starter插件可以立即为插件开发做好准备，因此您可以直接进入散点图的可视化。gydF4y2Ba

使用SVG和React创建图形gydF4y2Ba

有无数的库和框架可以在web浏览器中创建图表和可视化数据，它们都有自己的优势。幸运的是，Grafana给了你选择最适合你的插件的自由。gydF4y2Ba

在本教程中，您将使用SVG和gydF4y2BaD3.jsgydF4y2Ba，这是一种为web浏览器创建交互式可视化的流行组合。gydF4y2Ba

SVG，或可缩放矢量图形，是一种用于为web定义基于矢量的图形的图像格式。因为SVG是基于XML的，所以可以为图形元素创建React组件。gydF4y2Ba

例如，下面是如何创建一个渲染圆圈的React组件:gydF4y2Ba

export const Circle: React。FC = ({width, height}) => {return ();};gydF4y2Ba

自从Grafana 7.0发布以来，面板现在是React组件，这意味着你可以在你的插件中使用上面的例子，而不需要任何更改。这为使用React社区开发的组件创建自定义可视化提供了许多可能性。gydF4y2Ba

您可以在中找到创建可视化的React组件gydF4y2BaSimplePanel.tsxgydF4y2Ba在gydF4y2BasrcgydF4y2Ba目录中。插件模板已经为您提供了一些代码，但在这种情况下，您将重新开始。gydF4y2Ba

将Circle组件中的代码添加到gydF4y2BaSimplePanelgydF4y2Ba组件。gydF4y2Ba

export const SimplePanel: React。FC = ({width, height}) => {return ();};gydF4y2Ba

重新构建插件，并重新加载浏览器以查看新的更改。如果您还没有保存仪表板，系统可能会提示您保存仪表板。gydF4y2Ba

你也可以在修改代码时重新构建插件gydF4y2Ba纱看gydF4y2Ba而不是gydF4y2Ba纱线开发gydF4y2Ba．gydF4y2Ba

使用D3转换数据gydF4y2Ba

一个圆是很好，但我们想要可视化更多的东西，而不需要自己计算坐标。gydF4y2Ba

js是一个广泛流行的用于创建的库gydF4y2Ba数据驱动文件gydF4y2Ba．虽然从技术上讲它不是一个图表库，但它通常用于以编程方式生成SVG图表。(要了解使用D3可以做什么，请查看gydF4y2BaD3画廊gydF4y2Ba．)

接下来，我将向您展示如何使用D3与React一起创建更复杂的基于svg的图形。gydF4y2Ba

将D3导入到插件中gydF4y2Ba

Grafana捆绑了D3依赖项，并使它在加载时对插件可用，但你需要安装TypeScript类型进行开发。gydF4y2Ba

Yarn添加——dev @types/d3gydF4y2Ba

你还需要在你的gydF4y2BaSimplePanel.tsxgydF4y2Ba．gydF4y2Ba

Import * as d3 from 'd3';gydF4y2Ba

使用标尺转换数据gydF4y2Ba

使用D3动态绘制大量数据的最简单方法是使用gydF4y2Ba尺度gydF4y2Ba．gydF4y2Ba

简单地说，比例尺是将一个值范围映射到另一个值范围的函数。在本例中，您希望将一组值映射到以像素为单位的相应位置。gydF4y2Ba

为水平轴添加D3刻度，它将0到100之间的值映射到面板内的坐标。gydF4y2Ba
```
const xScale = d3 . scallinear () .domain([0,100]) .range([0, width]);gydF4y2Ba
```
为垂直轴添加另一个刻度。注意，范围从gydF4y2Ba高度gydF4y2Ba来gydF4y2Ba0gydF4y2Ba．这就颠倒了比例gydF4y2Ba0gydF4y2Ba从底部开始。gydF4y2Ba
```
const yScale = d3 . scallinear () .domain([0,100) .range([height, 0]);gydF4y2Ba
```

现在已经设置了刻度，可以使用它们来计算数据集的x和y位置。gydF4y2Ba

生成一些可以可视化的数据点。gydF4y2Ba

Let points: any = [];对于(设I = 0;I < 100;i++){点。push({x: i * Math.random()， y: i * Math.random()});｝gydF4y2Ba

生成gydF4y2Ba圆gydF4y2Ba标记，并将它们放在SVG组中，gydF4y2BaggydF4y2Ba．gydF4y2Ba

返回(

重新构建插件并重新加载浏览器以更新面板。gydF4y2Ba

如果你已经有一些使用D3的经验，上面的代码可能不是你所习惯的。因为D3和React都想更新DOM，你需要设置一些界限，这样它们就不会互相踩到对方的脚趾。gydF4y2Ba

解决这个问题有不同的方法。我的首选解决方案是只使用D3进行数据转换，React渲染元素。如果您更喜欢使用D3来呈现元素，则gydF4y2BaReact + D3.jsgydF4y2Ba指南解释了如何使用gydF4y2BauseEffectgydF4y2Ba钩子来完成这个任务。gydF4y2Ba

生成轴gydF4y2Ba

在构建图表时，一个好的做法是为每个可视化变量提供一个轴。如果没有轴的支持，您就无法判断正在可视化的值之间的实际距离。gydF4y2Ba

幸运的是，D3提供了辅助函数来为图表生成轴。gydF4y2Ba

使用前面创建的刻度，创建一个水平轴和一个垂直轴。gydF4y2Ba
```
const xAxis = d3.axisBottom(xScale);const yAxis = d3.axisLeft(yScale);gydF4y2Ba
```
生成每个轴的元素，通过传递一个匿名函数作为gydF4y2Ba裁判gydF4y2Ba到一个gydF4y2BaggydF4y2Ba元素。gydF4y2Ba
```
 {d3.select(node)。call(xAxis as any);}} / >gydF4y2Ba
```

转换SVG元素gydF4y2Ba

不幸的是，如果您将这两个轴添加到图形中，它们可能不会在您预期的位置结束。例如，SVG坐标系统从左上角开始，这意味着横轴现在位于图表的顶部。gydF4y2Ba

我们先来看纵轴。即使线是可见的，数字是不可见的。您可以通过向图表添加一些边距来解决这个问题。gydF4y2Ba

定义图表边距。gydF4y2Ba

Const margin ={左:30，上:30，右:30，下:30};gydF4y2Ba

通过减去边缘来计算内部图表的尺寸。gydF4y2Ba

const chartWidth = width - (margin.)左+ margin.right);const chartHeight = height - (margin.)Top + margin.bottom);gydF4y2Ba

通过将点和轴围绕在另一个点和轴周围来添加边距gydF4y2BaggydF4y2Ba标签，这次是一个gydF4y2Ba变换gydF4y2Ba属性转换其中的元素。gydF4y2Ba

更新刻度以使用内部图表尺寸。gydF4y2Ba

const xScale = d3 . scallinear () .domain([0,100]) .range([0, chartWidth]);const yScale = d3 . scallinear () .domain([0,100]) .range([chartHeight, 0]);gydF4y2Ba