Log Analysis 可視化

Javascript框架調研

組裏說要做一個操作系統不同版本的測試log的管理工具，我就先調研了一下如何實現測試log的可視化。原來在最近幾年js發展的非常驚人，這裏有一些好的可視化框架，大家拿走不謝。

var myChart;
var eCharts;

require.config({
	paths : {
		'echarts' : '${pageContext.request.contextPath}/js/echarts2.0/echarts' ,
		'echarts/chart/line' : '${pageContext.request.contextPath}/js/echarts2.0/echarts' //需要的組件
	}
});

require(
	[ 'echarts', 
		'echarts/chart/line'
	], DrawEChart //異步加載的回調函數繪製圖表
);

//創建ECharts圖表方法
function DrawEChart(ec) {
	eCharts = ec;
	myChart = eCharts.init(document.getElementById('main'));
	myChart.showLoading({
		text : "圖表數據正在努力加載..."
	});
	//定義圖表options
	var options = {
		title : {
			text : "未來一週氣溫變化",
			subtext : "純屬虛構",
			sublink : "http://www.baidu.com"
		},
		tooltip : {
			trigger : 'axis'
		},
		legend : {
			data : [ "最高氣溫" ]
		},
		toolbox : {
			show : true,
			feature : {
				mark : {
					show : true
				},
				dataView : {
					show : true,
					readOnly : false
				},
				magicType : {
					show : true,
					type : [ 'line', 'bar' ]
				},
				restore : {
					show : true
				},
				saveAsImage : {
					show : true
				}
			}
		},
		calculable : true,
		xAxis : [ {
			type : 'category',
			boundaryGap : false,
			data : [ '1', '2', '3', '4', '5', '6', '7' ]
		} ],
		yAxis : [ {
			type : 'value',
			axisLabel : {
				formatter : '{value} °C'
			},
			splitArea : {
				show : true
			}
		} ],
		grid : {
			width : '90%'
		},
		series : [ {
			name : '最高氣溫',
			type : 'line',
			data : [ 11, 22, 33, 44, 55, 33, 44 ],//必須是Integer類型的,String計算平均值會出錯
			markPoint : {
				data : [ {
					type : 'max',
					name : '最大值'
				}, {
					type : 'min',
					name : '最小值'
				} ]
			},
			markLine : {
				data : [ {
					type : 'average',
					name : '平均值'
				} ]
			}
		} ]
	};
	myChart.setOption(options); //先把可選項注入myChart中
	myChart.hideLoading();
	getChartData();//aja後臺交互 
}

function getChartData() {
	//獲得圖表的options對象
	var options = myChart.getOption();
	//通過Ajax獲取數據
	$.ajax({
		type : "post",
		async : false, //同步執行
		url : "${pageContext.request.contextPath}/echarts/line_data",
		data : {},
		dataType : "json", //返回數據形式爲json
		success : function(result) {
			if (result) {
				options.legend.data = result.legend;
				options.xAxis[0].data = result.category;
				options.series[0].data = result.series[0].data;

				myChart.hideLoading();
				myChart.setOption(options);
			}
		},
		error : function(errorMsg) {
			alert("不好意思，大爺，圖表請求數據失敗啦!");
			myChart.hideLoading();
		}
	});
}

後臺代碼，從網上找了一個javaweb的代碼，先放這裏，後面實現了Python的代碼再來補充。

@Controller
@RequestMapping("/echarts")
public class EntityController {
	
	private static final Logger logger = LoggerFactory.getLogger(EntityController.class);

	@RequestMapping("/line_data")
	@ResponseBody
	public EchartData lineData() {
		logger.info("lineData....");
		
		List<String> legend = new ArrayList<String>(Arrays.asList(new String[]{"最高氣溫"}));//數據分組
		List<String> category = new ArrayList<String>(Arrays.asList(new String []{"週一","週二","週三","週四","週五","週六","週日"}));//橫座標
		List<Series> series = new ArrayList<Series>();//縱座標
		
		series.add(new Series("最高氣溫", "line", 
						new ArrayList<Integer>(Arrays.asList(
								21,23,28,26,21,33,44))));
		
		EchartData data=new EchartData(legend, category, series);
		return data;
	}
	
	@RequestMapping("/line_page")
	public String linePage() {
		logger.info("linePage....");
		return "report/line";
	}
	
	
}

實現計劃

當前我們的組的數據主要是使用mongodb進行存儲的。要不要考慮使用使用django呢，如果只是實現可視化這個任務，沒有必要使用django框架，完全可以使用python(PyMongo+ echarts-python)+ MongoDB的解決方案就好了。但是如果考慮的後期的拓展或者應用的進一步增加的話，使用框架是一個比較好的選擇。

• MongoDB + Echarts
• MongoDB + Django + Echarts

Demo

首先安裝pip和使用pip install echarts-python 然後直接運行下面例子：

from echarts import Echart, Legend, Bar, Axis

chart = Echart('GDP', 'This is a fake chart')
chart.use(Bar('China', [2, 3, 4, 5, 1 ,2 ,3, 4, 25, 36, 27]))
chart.use(Legend(['GDP']))
chart.use(Axis('category', 'bottom', data=['Nov', 'Dec', 'Jan', 'Feb','March','April','Jun','Jul','Aug','Sep','Oct']))
chart.use(Axis('value','left', data= range(0, 100, 10 )))
chart.plot()

就在瀏覽器中出現瞭如下圖片：

參考鏈接

1. echarts github地址
2. echarts 官網 其中包含各種樣例和API地址
3. echarts python下載
4. MongoDB 文檔和中文社區
5. Django + MongoDB IBM Blog