4. Grafana使用mysql作为数据源,呈现图表

4. Grafana使用mysql作为数据源,呈现图表,第1张

近期在使用python写一套模拟API请求的监控项目,考虑数据可视化这方面就采用grafana来呈现,下面来看看怎么弄。

首先安装好mysql,将监控的日志数据写入到mysql之中。如下图:

好了,这里就已经准备好了相关的测试模拟数据。那么下面就使用Grafana来配置图表看看。

如果有不清楚Grafana怎么安装的朋友,可以点击 这里 查看如何安装部署。

按照脚本我已经设置好了 admin 的密码为 newpwd 了。

输入用户名 admin 和 密码 newpwd ,点击 Log In 登录系统。

在登陆系统后的首页,就可以进行数据源的添加了。

访问不了 localhost:3306 的原因是因为Grafana是使用docker容器启动的,而容器当然没有部署mysql。

所以,修改mysql访问配置如下:

好了,数据源mysql已经配置好了。下一步就是配置图表的呈现了。

下面来编写一个SQL查询来看看。

从上图看出,从mysql中查询的结果直接就可以从Grafana表格呈现了。

好了,基本上table表格已经呈现,但是单纯这样的一个表格满足不了我的胃口。

那么下面就来再整一个曲线图来看看。

我不是想单独增加一个新的面板,而是想在刚刚创建的table上面创建一个曲线图,那么该怎么做呢?

从上这个图表的配置我一开始也没太理解清楚,配置过后,看着图表呈现就更加好的理解了。

根据图表的内容,我查询的分析如上图。

当然还可以呈现更加多的图表,这里就基本介绍到这里啦。

public class CategoryItemChart {

public static String generateBarChart(HttpSession session, PrintWriter pw,int w, int h,ArrayList list) {

String filename = null

try {

CategoryDataset dataset = createDataset(list)

JFreeChart chart = ChartFactory.createBarChart(

"",//图表标题

"",//X轴标题

"",//Y轴标题

dataset,//数据集合

PlotOrientation.VERTICAL,//图表显示方向(水平、垂直)

true,//是否使用图例

true,//是否使用工具提示

false//是否为图表增加URL

)

/*------------配置图表属性--------------*/

chart.setBackgroundPaint(Color.white)// 1,设置整个图表背景颜色

CategoryPlot plot = chart.getCategoryPlot()/*------------设定Plot参数-------------*/

plot.setBackgroundPaint(Color.white)// 2,设置详细图表的显示细节部分的背景颜色

plot.setDomainGridlinePaint(Color.black)// 3,设置垂直网格线颜色

plot.setDomainGridlinesVisible(false)// 4,设置是否显示垂直网格线

plot.setRangeGridlinePaint(Color.yellow)// 5,设置水平网格线颜色

plot.setRangeGridlinesVisible(false)//6,设置是否显示水平网格线

/*---------将所有数据转换为整数形式---------*/

final NumberAxis rangeAxis = (NumberAxis) plot.getRangeAxis()

rangeAxis.setStandardTickUnits(NumberAxis.createIntegerTickUnits())

/*---------设置是否在柱图的状态条上显示边框----*/

CategoryItemRenderer renderer = (CategoryItemRenderer) plot.getRenderer()

BarRenderer render = (BarRenderer) plot.getRenderer()

// render.setItemMargin(0.0)

// render.setMinimumBarLength(0.0)

/*---------设置状态条颜色的深浅渐变-----------*/

GradientPaint gp0 = new GradientPaint(0.0f, 0.0f, new Color(255,200, 80), 0.0f, 0.0f, new Color(255, 255, 40))

GradientPaint gp1 = new GradientPaint(0.0f, 0.0f, new Color(50,255, 50), 0.0f, 0.0f, new Color(100, 255, 100))

GradientPaint gp2 = new GradientPaint(0.0f, 0.0f, Color.red, 0.0f,0.0f, new Color(255, 100, 100))

GradientPaint gp3 = new GradientPaint(0.0f, 0.0f, new Color(108,108, 255), 0.0f, 0.0f, new Color(150, 150, 200))

renderer.setSeriesPaint(0, gp0)

renderer.setSeriesPaint(1, gp1)

renderer.setSeriesPaint(2, gp2)

renderer.setSeriesPaint(3, gp3)

/*

*

* 解决柱状体与图片边框的间距问题

*

*

* */

/*------设置X轴标题的倾斜程度----*/

CategoryAxis domainAxis = plot.getDomainAxis()

domainAxis.setCategoryLabelPositions(CategoryLabelPositions.createUpRotationLabelPositions(Math.E / 6.0))

/*------设置柱状体与图片边框的左右间距--*/

domainAxis.setLowerMargin(0.06)

domainAxis.setUpperMargin(0.06)

/*------设置柱状体与图片边框的上下间距---*/

ValueAxis rAxis = plot.getRangeAxis()

rAxis.setUpperMargin(0.3)

rAxis.setLowerMargin(0.3)

/*---------设置每一组柱状体之间的间隔---------*/

render.setItemMargin(0.01)

/*

*

* 解决柱状体与图片边框的间距问题

*

*

* */

/*

*

*

* 解决JFREECHART的中文显示问题

*

*

* */

/*----------设置消除字体的锯齿渲染(解决中文问题)--------------*/

chart.getRenderingHints().put(RenderingHints.KEY_TEXT_ANTIALIASING,RenderingHints.VALUE_TEXT_ANTIALIAS_OFF)

/*----------设置标题字体--------------------------*/

TextTitle textTitle = chart.getTitle()

textTitle.setFont(new Font("黑体", Font.PLAIN, 20))

/*------设置X轴坐标上的文字-----------*/

domainAxis.setTickLabelFont(new Font("sans-serif", Font.PLAIN, 11))

/*------设置X轴的标题文字------------*/

domainAxis.setLabelFont(new Font("宋体", Font.PLAIN, 12))

/*------设置Y轴坐标上的文字-----------*/

rAxis.setTickLabelFont(new Font("sans-serif", Font.PLAIN, 14))

/*------设置Y轴的标题文字------------*/

rAxis.setLabelFont(new Font("黑体", Font.PLAIN, 12))

/*---------设置柱状体上的显示的字体---------*/

renderer.setBaseItemLabelFont(new Font("宋体", Font.PLAIN, 12))

renderer.setBaseItemLabelGenerator(new LabelGenerator(0.0))

renderer.setBaseItemLabelsVisible(true)

/*

*

*

* 解决JFREECHART的中文显示问题

*

*

* */

/*------得到chart的保存路径----*/

ChartRenderingInfo info = new ChartRenderingInfo(new StandardEntityCollection())

filename = ServletUtilities.saveChartAsPNG(chart, w, h, info,session)

/*------使用printWriter将文件写出----*/

ChartUtilities.writeImageMap(pw, filename, info, true)

pw.flush()

} catch (Exception e) {

System.out.println("Exception - " + e.toString())

e.printStackTrace(System.out)

filename = "public_error_500x300.png"

}

return filename

}

/*-------------设置柱状体顶端的数据显示--------------*/

static class LabelGenerator implements CategoryItemLabelGenerator {

private double threshold

public LabelGenerator(double threshold) {

this.threshold = threshold

}

public String generateLabel(CategoryDataset dataset, int row, int column) {

String result = null

final Number value = dataset.getValue(row, column)

if (value != null) {

final double v = value.doubleValue()

if (v >this.threshold) {

result = value.toString()

}

}

return result

}

public String generateRowLabel(CategoryDataset dataset, int row) {

return null

}

public String generateColumnLabel(CategoryDataset dataset, int column) {

return null

}

}

/*-----------数据封装-------------*/

private static CategoryDataset createDataset(ArrayList list) {

String s1 = "1"

String s2 = "2"

String c1 = "1"

String c2 = "2"

DefaultCategoryDataset dataset = new DefaultCategoryDataset()

dataset.setValue(44, s1, c1)

dataset.setValue(48, s2, c2)

return dataset

}

}

比较完整的一个得到柱图的代码,保存路径是临时文件,怎么从数据库取值应该会吧。把dataset处理一下就可以了。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/8711720.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-20
下一篇 2023-04-20

发表评论

登录后才能评论

评论列表(0条)

保存