HTML代码
<div data-netdata="acme_system.hotwater.hotwatertemp"
data-title="Hot Water Temperature"
data-decimal-digits="1"
data-chart-library="easypiechart"
data-colors="#FE3912"
data-width="55%"
data-height="50%"
data-points="1200"
data-after="-1200"
data-dimensions="actual"
data-units="°C"
data-easypiechart-max-value="50"
data-easypiechart-min-value="40"
data-common-max="netdata-hotwater-max"
data-common-min="netdata-hotwater-min"
></div>Netdata 图表参数说明
| 参数名 | 描述 |
|---|---|
| data-netdata | 指定监控的类型，如CPU占用，内存占用等 |
| data-title | 显示的标题 |
| data-decimal-digits | 显示数据的位数，1表示不显示小数点后面的数字 |
| data-chart-library | 显示数据的类型，如饼状图、线形图等 |
| data-colors | 指定图表的主要颜色 |
| data-width | 图标的宽度 |
| data-height | 图标的高度 |
| data-points | 指定要显示的数据点的数量，1200 表示图表将显示过去 1200 个数据点。大多数折线图库会使用每个数据点 3 个像素。 |
| data-after | 指定图表中第一个数据点的时间。 -1200 表示图表显示最近 1200 个数据点。 |
| data-dimensions | 指定显示数据的维度。 actual 表示显示实际测量值，而不是平均值、最大值或最小值。 |
| data-units | 指定数据单位 |
| data-easypiechart-max-value | 指定圆形图表的最大值 |
| data-easypiechart-min-value | 指定圆形图表的最小值 |
| data-common-max | 指定图表的最大值 |
| data-common-min | 指定图表的最小值 |
| data-gtime | 指定了图表数据的时间间隔。图表将不会实时显示每个秒的数据，而是将每 60 秒内的所有数据聚合在一起，显示一个代表这 60 秒内数据的平均值或最大值。这个属性与 data-points 配合使用，共同决定了图表展示的数据时间范围。 |
| data-method | 指定了图表要显示的数据类型。例如 max 意味着图表将会显示最近 1200 个数据点中最大的值。这个属性与 data-points 和 data-after 配合使用。 |
| data-show-value-of-in-at | 指定在图表中显示 数据进入某个范围 的时间信息。 |
| data-show-value-of-out-at | 指定在图表中显示 数据离开某个范围 的时间信息。 |
data-netdata图表类型
| 图表类型 | 介绍 | 适用场景 |
|---|---|---|
| d3pie | 使用 D3.js 库绘制饼图，用于展示数据比例关系。可以显示多个扇区，每个扇区代表一个数据类别，扇区的颜色和大小对应数据比例。 | 展示不同类别数据占比，例如网站访问来源、用户群分布等。 |
| d3 | D3.js 库，可以绘制各种类型的图表，包括折线图、柱状图、散点图、热力图等。Netdata 的 d3 图表允许你自定义图表类型和参数，以满足更复杂的数据展示需求。 | 需要高度定制化的图表展示，例如展示多个指标的趋势、数据之间的关系等。 |
| easypiechart | 使用简单的圆形进度条来展示单个数据指标的值，例如百分比、数值等。 | 展示单个指标的当前值，例如 CPU 使用率、内存占用率等。 |
| gauge | 使用类似仪表盘指针的方式展示单个数据指标的值，可以显示数值范围，并带有刻度线和指针。 | 展示单个指标的值，例如系统温度、网络带宽使用率等。 |
| textonly | 图表只显示纯文本信息，没有图形展示，用于展示简单的文本信息或数据值。 | 展示简单的文本信息或数据值，例如系统版本、服务器时间等。 |
| dygraph | 使用 JavaScript 库 Dygraph 来绘制交互式图表，主要用于展示时间序列数据，例如 CPU 使用率随时间变化的趋势等。 | 展示时间序列数据，例如系统指标的实时变化趋势。 |
| sparkline | 使用小型折线图来展示数据趋势，通常用于在一个较小的区域内展示大量数据。 | 在一个较小的区域内展示大量数据趋势，例如网站访问量的变化趋势。 |
| peity | 使用 JavaScript 库 peity 来绘制小型图表，支持折线图、柱状图、饼图等。 | 在一个较小的区域内展示少量数据，例如网站流量的实时变化趋势。 |
| 使用 Google Chart API 来绘制各种类型的图表，包括折线图、柱状图、饼图、散点图等。 | 需要使用 Google Chart API 来绘制图表。 |
选择合适的图表类型
- 如果你需要展示数据比例，可以选择饼图 ( d3pie ) 或小型饼图 ( peity )。
- 如果你需要展示单个数据指标的值，可以选择进度条 ( easypiechart )、指针 ( gauge ) 或文本 ( textonly )。
- 如果你需要展示时间序列数据，可以选择折线图 ( dygraph ) 或小型折线图 ( sparkline )。
- 如果你需要高度定制化的图表，可以选择 D3.js 图表 ( d3 )。
One comment
真棒！