我使用igDataChart jquery控件开发了一个柱形图。图形中的所有数据均可正确呈现,但其下方的标签最多只能显示十个。如果我将数字增加到11,则标签将每隔一个显示一次。在我的示例中,总数应显示14个标签,但是仅显示7个标签,其他所有标签都是可见的。(例如,1、3、5、7等);上图显示了所有列(两个系列-共28列)。列标签应在其下方显示的空格为空白。
该代码链接提供了一个示例。
$(function () {
var data = [
{"Entity":"THA","Complete":59,"Ineligible":2,},{"Entity":"THAL","Complete":66,"Ineligible":15,},{"Entity":"THAM","Complete":92,"Ineligible":22,},{"Entity":"THAZ","Complete":100,"Ineligible":3,},{"Entity":"THC","Complete":94,"Ineligible":5,},{"Entity":"THD","Complete":97,"Ineligible":15,},{"Entity":"THDN","Complete":76,"Ineligible":5,},{"Entity":"THFW","Complete":82,"Ineligible":24,},{"Entity":"THHEB","Complete":77,"Ineligible":3,},{"Entity":"THK","Complete":100,"Ineligible":38,},{"Entity":"THP","Complete":94,"Ineligible":14,},{"Entity":"THS","Complete":100,"Ineligible":5,},{"Entity":"THSW","Complete":72,"Ineligible":21,},{"Entity":"TOTAL","Complete":86,"Ineligible":15,},
];
$(function () {
$("#chart").igDataChart({
dataSource: data,
height: "355px",
width: "100%",
title: "Completion Summary",
subtitle: "",
axes: [{
name: "Entity",
type: "categoryX",
label: "Entity",
labelAngle: -45,
gap: 0.3,
}, {
name: "Percent",
type: "numericY",
title: "Percent"
}],
series: [{
// showTooltip: true enables the default tooltips
showTooltip: true,
// if a custom tooltipTemplate is set,
// the default tooltip will not be shown
showTooltip: true,
name: "Complete",
title: "Complete",
type: "column",
valueMemberPath: "Complete",
xAxis: "Entity",
yAxis: "Percent",
isTransitionInEnabled: true,
isHighlightingEnabled: true,
thickness: .05
}, {
showTooltip: true,
name: "Ineligible",
title: "Ineligible",
type: "column",
valueMemberPath: "Ineligible",
xAxis: "Entity",
yAxis: "Percent",
isTransitionInEnabled: true,
isHighlightingEnabled: true,
thickness: .05
}],
horizontalZoomable: true,
verticalZoomable: true,
windowResponse: "immediate"
});
});
});
我在Chrome,Firefox和IE 8-11中进行了测试
我寻找了可以分配给Java脚本的属性,该属性将提供更多空间或设置允许的标签总数,但是似乎没有可用的东西。有任何建议或解决方法吗?
x轴默认情况下以自动计算的间隔显示标签,并且将减少显示的标签数量,因为它们将开始发生冲突。在您的情况下,您正在使用一些旋转功能,以便能够显示更多具有更高密度的标签,因此您应该指示轴使用1的间隔,而不是自动间隔。为此,您应该设置
interval: 1
在轴上。我已经更新了您的示例以显示您的意思:http : //jsfiddle.net/F8YWY/2/
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句