条形图允许您绘制分类数据，如下图：
下面通过一个简单的例子来了解条形图的基本结构，如何使用条形图。注意，这里将采用 mysql 作为数据源。
假设我们有一个销售数据的例子，记录了不同产品在不同月份的销售量。数据表的 SQL 语句如下：
CREATE TABLE `bar_chart_data` ( `id` int(10) unsigned NOT NULL AUTO_INCREMENT, `product` varchar(100) DEFAULT NULL COMMENT '产品名', `jan` double DEFAULT NULL COMMENT '一月', `feb` double DEFAULT NULL COMMENT '二月', `mar` double DEFAULT NULL COMMENT '三月', PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4;
我们向数据表中插入几条测试数据如下：
INSERT INTO `bar_chart_data` (`id`, `product`, `jan`, `feb`, `mar`) VALUES (1, '产品A', 100, 150, 200); INSERT INTO `bar_chart_data` (`id`, `product`, `jan`, `feb`, `mar`) VALUES (2, '产品B', 50, 75, 100); INSERT INTO `bar_chart_data` (`id`, `product`, `jan`, `feb`, `mar`) VALUES (3, '产品C', 75, 100, 125);
现在编写如下SQL语句：
SELECT product, jan as '一月', feb as '二月', mar as '三月' FROM grafana.`bar_chart_data` limit 50
执行SQL语句，查询数据如下图：
上图中，分别存储了三个产品三个月的销售数据，下面我们将 SQL 语句放到 Grafana 中来看看效果：
上图中，显示了三个产品（产品A、产品B、产品C）一月到三月的销售情况。
为了方便理解，我们来模拟一个产品12个月的销售情况，SQL语句如下：
SELECT '产品A' as product, 102 as '一月', 120 as '二月', 128 as '三月', 138 as '四月', 112 as '五月', 140 as '六月', 138 as '七月', 118 as '八月', 142 as '九月', 135 as '十月', 178 as '十一月', 180 as '十二月' FROM dual
运行查询，显示效果如下图：
注意观察，grafana 将我们的数据进行了分组，按照产品名称分组，这不是我们想要显示的效果。其实应该换一种方式展示，SQL语句如下图：
SELECT '一月' as product, 102 as '一月' FROM dual union all SELECT '二月' as product, 120 as '一月' FROM dual union all SELECT '三月' as product, 128 as '一月' FROM dual union all SELECT '四月' as product, 138 as '一月' FROM dual union all SELECT '五月' as product, 112 as '一月' FROM dual union all SELECT '六月' as product, 140 as '一月' FROM dual union all SELECT '七月' as product, 138 as '一月' FROM dual union all SELECT '八月' as product, 118 as '一月' FROM dual union all SELECT '九月' as product, 142 as '一月' FROM dual union all SELECT '十月' as product, 135 as '一月' FROM dual union all SELECT '十一月' as product, 178 as '一月' FROM dual union all SELECT '十二月' as product, 180 as '一月' FROM dual
运行查询，显示效果如下图：
看看查询出来的数据：
上图就是一个简单表格，第一列是产品的月份，第二列是每月的销售数据。
使用这些选项来完善可视化效果。
Auto - Grafana 会根据面板尺寸决定条形图的方向。
Horizontal - 将使 X 轴成为类别轴。
Vertical - 将使 Y 轴成为类别轴。
示例：Horizontal 效果
当图表为垂直方向时，此设置会旋转条形图下的标签。当条形图标签较长并重叠时，该设置非常有用。例如，将类别标签旋转 45 度：
设置条形图标签的最大长度。长度超过最大值的标签将被截断，并附加 ....。注意：
None 不限制
Small 需要 100px 的空间
Medium 需要 200px 的空间
Large 需要 300px 的空间
设置条形标签之间的最小间距。
控制在条形图顶部是否显示数值：
Auto 如果有空间，将显示数值。
Always 总是显示数值。
Never 从不显示数值。
控制条形图堆叠。
Off：不堆叠条形图。
Normal：条形图将相互堆叠。
Percent：条形图将相互堆叠，每个条形图的高度是堆叠总高度的百分比。
控制分组的宽度。1 = 最大宽度，0 = 最小宽度。
控制条形图的宽度。1 = 最大宽度，0 = 最小宽度。
控制条形图圆角的半径。
0 = 最小半径
0.5 = 最大半径
控制当您将鼠标悬停在条形图上时，是否突出显示条形图的整个周围区域。例如：
控制条形图的边线宽度。
控制条形图填充不透明度。
设置渐变填充的模式。渐变填充基于线条颜色。要更改颜色，请使用标准配色方案字段选项。
渐变外观受填充不透明度设置的影响。
None：无渐变填充，这是默认设置。
Opacity：梯度的透明度是根据 Y 轴上的数值计算得出的。填充的不透明度随 Y 轴上的数值增加而增加。
Hue：渐变色是根据线条颜色的色调生成的。
将光标悬停在可视化上时，Grafana 会显示工具提示。选择工具提示的行为方式。
Single - 悬停工具提示仅显示单个系列，即您在可视化中悬停的系列。
All - 悬停工具提示显示可视化中的所有系列。Grafana 会在工具提示的系列列表中以粗体显示悬停的系列。
Hidden - 与可视化交互时不显示工具提示。
注意，使用覆盖字段可从工具提示中隐藏单个系列。
使用这些设置可定义图例在可视化中的显示方式。有关图例的更多信息，请参阅配置图例。
List - 以列表形式显示图例。这是图例的默认显示模式。
Table - 以表格形式显示图例。
Hidden - 隐藏图例。
选择显示图例的位置。
Bottom - 图表下方。
Right - 图表右侧。
选择要在图例中显示的标准计算，可以有多个。
选择要在图例中显示的标准计算，可以有多个。
输入数值可更改柱形图上文字的大小。
使用以下字段设置来改进坐标轴的显示方式。
某些字段选项不会影响可视化效果，直到您单击正在编辑的字段选项框外或按回车键。
选择 Y 轴的位置。可选值如下：
Auto：Grafana 会自动将 Y 轴分配给系列。如果有两个或更多单位不同的系列，则 Grafana 会将左轴分配给第一个单位，右轴分配给后面的单位。
Left：在左侧显示所有 Y 轴。
Right：在右侧显示所有 Y 轴。
Hidden：隐藏所有坐标轴。
注意：如果要有选择地隐藏坐标轴，请添加针对特定字段的字段覆盖。
设置 Y 轴文本标签。如果有多个 Y 轴，则可以通过覆盖来指定不同的标签。
设置坐标轴的固定宽度。默认情况下，Grafana 会动态计算坐标轴的宽度。
通过设置坐标轴的宽度，坐标轴类型不同的数据可以共享相同的显示比例。这样就可以更轻松地比较多个图表的数据，因为坐标轴不会在可视范围内相互移动或拉伸。
设置软最小或软最大选项，以便更好地控制 Y 轴限制。默认情况下，Grafana 会根据数据集自动设置 Y 轴的范围。
软最小值和软最大值设置可以防止在数据大部分是平的情况下，突发点变成高山；而从标准最小值和最大值字段选项中导出的硬最小值或最大值可以通过剪切超过定义点的尖峰，防止间歇性尖峰使有用的细节变得平淡。
您可以设置标准最小/最大选项来定义 Y 轴的硬限制。更多信息，请参阅标准选项定义。
在某些情况下，您可能需要显示多个 y 轴。例如，如果您有一个数据集同时显示随时间变化的温度和湿度，您可能希望为这两个序列显示两个单位不同的 y 轴。
您可以通过添加字段覆盖来实现这一目的。请根据需要多次执行上述步骤，添加所需的任意多个 Y 轴。
川公网安备51010802032098
