HighChart堆叠图表重叠较小的数据大小

时间:2017-06-04 19:01:54

标签: javascript jquery highcharts

我正在使用Jugal的工作区编辑器,      http://jsfiddle.net/jugal/bgNBG/ 在JS部分,我应用了自己的JS并面临一个问题。

大量数据将与整个数据点重叠。任何人都可以帮忙吗?

var chartingOptions = {
	chart : {
		type : "bar",
    renderTo : 'container',
		inverted : true
	},
	title : {
		text : "Bunny Chart"
	},
	xAxis : {
		title : {
			text : ""
		},
		type : "category",
		categories : ["DIP", "C", "Can", "Sch", "DC"]
	},
	yAxis : {
		title : {
			text : ""
		},
		min : 0.0,
		max : 503.0
	},
	column : {
		stacking : "normal"
	},
	legend : {
		enabled : true,
		align : "center",
		floating : false,
		itemMarginBottom : 0,
		itemMarginTop : 0,
		layout : "horizontal",
		lineHeight : 0,
		verticalAlign : "bottom",
		x : 0,
		y : 0
	},
	credits : {
		enabled : false
	},
	plotOptions : {
		area : {},
		bar : {},
		pie : {
			dataLabels : {}
		},
		series : {
			cursor : 'pointer',
		//	stacking : 'normal',
			point : {
				events : {
					click : {}
				}
			}
		},
		column: {
			grouping: false,
			shadow: false
		}
	},
	series : [{
			data : [{
					y : 74.0,
					name : "A",
					color : "#CCFF90",
					ddlRecordIds : [243496, 243496, 243501, 243501, 243506, 243506],
					
				}, {
					y : 2.0,
					name : "A",
					color : "#CCFF90",
					ddlRecordIds : [243641, 243641, 243676, 243676]
				}
			],
			name : "A",
			grouping : false,
			pointPadding: 0.1,
			dataLabels : {
				enabled : true
			},
			color : "#CCFF90"
		}, {
			data : [{
					y : 28.0,
					name : "B",
					color : "#FFFF90",
					ddlRecordIds : [243881, 243881, 243886, 243886]
				}, {
					y : 3.0,
					name : "B",
					color : "#FFFF90",
					ddlRecordIds : [243926, 243926, 243961, 243961, 243981, 243981]
				}
			],
			name : "B",
			grouping : false,
			pointPadding: 0.1,
			dataLabels : {
				enabled : true
			},
			color : "#FFFF90"
		}, {
			data : [{
					y : 25.0,
					name : "C",
					color : "#FFCCFF",
					ddlRecordIds : [244726, 244726, 244731, 244731]
				}
			],
			name : "C",
			grouping : false,
			pointPadding: 0.1,
			dataLabels : {
				enabled : true
			},
			color : "#FFCCFF"
		}, {
			data : [{
					y : 62.0,
					name : "E",
					color : "#CC6699",
					ddlRecordIds : [244036, 244036, 244041, 244041]
				}, {
					y : 2.0,
					name : "E",
					color : "#CC6699",
					ddlRecordIds : [244211, 244211, 244296, 244296]
				}
			],
			name : "E",
			grouping : false,
			pointPadding: 0.1,
			dataLabels : {
				enabled : true
			},
			color : "#CC6699"
		}, {
			data : [{
					y : 8.0,
					name : "F",
					color : "#FF3300",
					ddlRecordIds : [244851, 244851, 244856, 244856]
				}
			],
			name : "F",
			grouping : false,
			pointPadding: 0.1,
			dataLabels : {
				enabled : true
			},
			color : "#FF3300"
		}, {
			data : [{
					y : 174.0,
					name : "G",
					color : "#6666CC",
					ddlRecordIds : [244891, 244891, 244896, 244896]
				}
			],
			name : "G",
			grouping : false,
			pointPadding: 0.1,
			dataLabels : {
				enabled : true
			},
			color : "#6666CC"
		}, {
			data : [{
					y : 85.0,
					name : "H",
					color : "#666666",
					ddlRecordIds : [245761, 245761, 245766, 245766]
				}
			],
			name : "H",
			grouping : false,
			pointPadding: 0.1,
			dataLabels : {
				enabled : true
			},
			color : "#666666"
		}, {
			data : [{
					y : 161.0,
					name : "I",
					color : "#669999",
					ddlRecordIds : [234731, 234731, 234751, 234751]
				}, {
					y : 503.0,
					name : "I",
					color : "#669999",
					ddlRecordIds : [234736, 234736, 234741, 234741]
				}, {
					y : 355.0,
					name : "I",
					color : "#669999",
					ddlRecordIds : [234771, 234771, 234776, 234776]
				}, {
					y : 35.0,
					name : "I",
					color : "#669999",
					ddlRecordIds : [234936, 234936, 235186, 235186]
				}
			],
			name : "I",
			grouping : false,
			pointPadding: 0.1,
			dataLabels : {
				enabled : true
			},
			color : "#669999"
		}, {
			data : [{
					y : 232.0,
					name : "J",
					color : "#009999",
					ddlRecordIds : [237406, 237406, 237411, 237411]
				}, {
					y : 20.0,
					name : "J",
					color : "#009999",
					ddlRecordIds : [237466, 237466, 237471, 237471]
				}
			],
			name : "J",
			grouping : false,
			pointPadding: 0.1,
			dataLabels : {
				enabled : true
			},
			color : "#009999"
		}, {
			data : [{
					y : 61.0,
					name : "K",
					color : "#CCFF99",
					ddlRecordIds : [244416, 244416, 244421, 244421]
				}, {
					y : 1.0,
					name : "K",
					color : "#CCFF99",
					ddlRecordIds : [244441, 244441]
				}
			],
			name : "K",
			grouping : false,
			pointPadding: 0.1,
			dataLabels : {
				enabled : true
			},
			color : "#CCFF99"
		}, {
			data : [{
					y : 460.0,
					name : "L",
					color : "#FFFF99",
					ddlRecordIds : [241196, 241196, 241201, 241201]
				}
			],
			name : "L",
			grouping : false,
			pointPadding: 0.1,
			dataLabels : {
				enabled : true
			},
			color : "#FFFF99"
		}
	],
	dataGrouping : {
		groupPixelWidth : 40
	}
};

chartingOptions = $.extend({}, jugalsLib.getBasicChartOptions(), chartingOptions);
var chart = new Highcharts.Chart(chartingOptions);

0 个答案:

没有答案