0

igDataChart jquery コントロールを使用して縦棒グラフを作成しました。グラフ内のすべてのデータは正しくレンダリングされますが、その下のラベルは最大 10 個しか表示されません。数を 11 に増やすと、ラベルは 1 つおきに表示されます。この例の合計数には 14 個のラベルが表示されるはずですが、7 個しか表示されず、他のすべてのラベルが表示されます。(例、1、3、5、7 など)、ただし; 上のグラフは、すべての列を示しています (2 つの系列 - 合計 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 スクリプトに割り当てることができるプロパティを探しましたが、このようなものは利用できないようです。存在する提案や回避策はありますか？

4

1 に答える 1

2

x 軸はデフォルトで自動的に計算された間隔でラベルを表示し、衝突が始まると表示されるラベルの数を減らします。あなたの場合、より多くのラベルをより高密度で表示できるようにするために回転を使用しているため、軸に自動間隔ではなく間隔 1 を使用するように指示する必要があります。これを行うには、設定する必要があります

interval: 1

軸上。サンプルを更新して、私が何を意味するかを示しました: http://jsfiddle.net/F8YWY/2/

于 2014-05-12T13:41:44.723 に答える