fusionCharts——拆线图

最近项目中用到了fusionCharts——拆线图，在此做个记录。

FusionCharts.ready(function () {
	var t_Id_Chart = centerPanel.getActiveTab().id;
	var selUnit_Chart = itemPanel.findById('selUnit').getValue();
 	var selDay_Chart = Ext.get('selDay').dom.value; 
 	var selMonth_Chart = Ext.get('selMonth').dom.value; 
 	var selYear_Chart = Ext.get('selYear').dom.value; 
	var _pageSize_Chart = Ext.getCmp('pagesize').getValue();
	var start_Chart = -1;
	$.ajax({
		type:'POST',
		url : contextPath + '/appraiseEleShow/getappraiseEleShowChartsData',
		data:{
			tabId:t_Id_Chart,
 			selUnit:selUnit_Chart,
 			selDay:selDay_Chart,
 			selMonth:selMonth_Chart,
 			selYear:selYear_Chart,
			limit:_pageSize_Chart,
			start:-1
		},
		dataType:'json',
		success:function(data){
			//标题及样式
			var chartDataMap = {
				"caption": "Number of visitors last week",
				"subCaption": "Bakersfield Central vs Los Angeles Topanga",
				"captionFontSize": "14",
				"subcaptionFontSize": "14",
				"subcaptionFontBold": "0",
				"paletteColors": "#0075c2,#1aaf5d",
				"bgcolor": "#ffffff",
				"showBorder": "0",
				"showShadow": "0",
				"showCanvasBorder": "0",
				"usePlotGradientColor": "0",
				"legendBorderAlpha": "0",
				"legendShadow": "0",
				"showAxisLines": "0",
				"showAlternateHGridColor": "0",
				"divlineThickness": "1",
				"divLineIsDashed": "1",
				"divLineDashLen": "1",
				"divLineGapLen": "1",
				"xAxisName": "时间",
				"yAxisName": "次数",
				"showValues": "0"               
			};
			//x轴坐标
			var categoriesMap = [
				{
					"category": [
						{ "label": "00时" },{ "label": "01时" },{ "label": "02时" },{ "label": "03时" },{ "label": "04时" },{ "label": "05时" }, 
						{ "label": "06时" },{ "label": "07时" },{ "label": "08时" },{ "label": "09时" },{ "label": "10时" },{ "label": "11时" },
						{ "label": "12时" },{ "label": "13时" },{ "label": "14时" },{ "label": "15时" },{ "label": "16时" },{ "label": "17时" },
						{ "label": "18时" },{ "label": "19时" },{ "label": "20时" },{ "label": "21时" },{ "label": "22时" },{ "label": "23时" }
					]
				}
			];
			//dataset为在后台取得的y轴数据
			var showDataMap = {'chart':chartDataMap,'categories':categoriesMap,'dataset':data.rows};
			var myChart = new FusionCharts({
		        type: 'msline',
		        renderAt: 'south-div1',
		        width: '700',
		        height: '250',
		        dataFormat: 'json'
		    });
		    myChart.setJSONData(showDataMap);
		    myChart.render();
		},
		error:function(){
		
		}
	});
});

dataset数据格式参考：

"dataset": [
	{
		"seriesname": "Bakersfield Central",
		"data": [
			{ "value": "15123" }, 
			{ "value": "14233" }, 
			{ "value": "25507" }, 
			{ "value": "9110" }, 
			{ "value": "15529" }, 
			{ "value": "20803" }, 
			{ "value": "19202" }
		]
	}, 
	{
		"seriesname": "Los Angeles Topanga",
		"data": [
			{ "value": "13400" }, 
			{ "value": "12800" }, 
			{ "value": "22800" }, 
			{ "value": "12400" }, 
			{ "value": "15800" }, 
			{ "value": "19800" }, 
			{ "value": "21800" }
		]
	}
]