我有几个单独的图表，并禁用了所有的轴(轴?)，以便我可以在表格的每个单元格中有一个简单的堆叠栏:
http://jsfiddle.net/hCb8C/3/根据这个论坛，图表应该采用其父元素的宽度。我试过在图表上设置显式宽度和100%，并将每个图表包装在具有显式宽度的div中。但是，从开始，如果您滚动到第三列Test，您可以看到宽度变化，它看起来真的很邋遢。我只想为图表设置一个明确的固定像素数。最后，我将根据最高的相对Total计算每个的宽度，这样它们就可以正确缩放。然而，在此之前，我至少需要让他们尊重宽度设置。
我怎么能让所有的图表尊重宽度设置?
$(function(){
$(".chart").each(function (index) {
var current = $(this)
var chart = current.kendoChart({
title: {
text: "Compliance",
visible: false
},
legend: {
visible: false
},
seriesDefaults: {
type: "bar",
stack: true,
gap: 0
},
series: [
{
name: "Compliant",
data: [current.data("compliant-count")],
color: "#00ff00",
tooltip: {
background: '#88ff88'
}
},
{
name: "Incomplete",
data: [current.data("incomplete-count")],
color: "#cccccc",
tooltip: {
background: '#e7e7e7'
}
},
{
name: "Non-compliant",
data: [current.data("noncompliant-count")],
color: "#ff0000",
tooltip: {
background: '#ff8888'
}
}
],
valueAxis: {
visible: false,
line: {
visible: false
},
minorGridLines: {
visible: false
},
majorGridLines: {
visible: false
}
},
categoryAxis: {
visible: false,
minorGridLines: {
visible: false
},
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
template: "<b>#= value #</b> <br /> #= series.name #"
}
}).data("kendoChart");
chart._tooltip.options.animation.duration = 0;//disable stupid tooltip animations
});//foreach chart
});
<div class="pivot-container">
<table class="table table-bordered table-condensed table-striped">
<thead>
<tr>
<th class="rowLabel"></th>
<th class="th-md"><b>test category</b>
</th>
<th class="th-md"><b>Sprint 48</b>
</th>
<th class="th-md"><b>Test</b>
</th>
</tr>
</thead>
<tbody>
<tr class="learnerGroupRow" data-group-member-id="28">
<td class="rowLabel"><b>Corporate</b>
</td>
<td class="td-md">
<div style="width:220px">
<div class="chart" data-compliant-count="1" data-incomplete-count="0" data-noncompliant-count="2" data-total="3"></div>
</div>
</td>
<td></td>
<td class="td-md">
<div style="width:220px">
<div class="chart" data-compliant-count="4" data-incomplete-count="2" data-noncompliant-count="9" data-total="15"></div>
</div>
</td>
</tr>
<tr class="learnerGroupRow" data-group-member-id="7">
<td class="rowLabel"><b>
Dave Test Group 1
</b>
</td>
<td class="td-md">
<div style="width:220px">
<div class="chart" data-compliant-count="0" data-incomplete-count="0" data-noncompliant-count="3" data-total="3"></div>
</div>
</td>
<td class="td-md">
<div style="width:220px">
<div class="chart" data-compliant-count="1" data-incomplete-count="0" data-noncompliant-count="2" data-total="3"></div>
</div>
</td>
<td class="td-md">
<div style="width:220px">
<div class="chart" data-compliant-count="0" data-incomplete-count="3" data-noncompliant-count="14" data-total="17"></div>
</div>
</td>
</tr>
<tr class="learnerGroupRow" data-group-member-id="970">
<td class="rowLabel"><b>
Managed
</b>
</td>
<td class="td-md">
<div style="width:220px">
<div class="chart" data-compliant-count="0" data-incomplete-count="0" data-noncompliant-count="3" data-total="3"></div>
</div>
</td>
<td></td>
<td class="td-md">
<div style="width:220px">
<div class="chart" data-compliant-count="0" data-incomplete-count="2" data-noncompliant-count="12" data-total="14"></div>
</div>
</td>
</tr>
<tr class="learnerGroupRow" data-group-member-id="0">
<td class="rowLabel"><b>
Other
</b>
</td>
<td class="td-md">
<div style="width:220px">
<div class="chart" data-compliant-count="0" data-incomplete-count="0" data-noncompliant-count="14" data-total="14"></div>
</div>
</td>
<td class="td-md">
<div style="width:220px">
<div class="chart" data-compliant-count="0" data-incomplete-count="0" data-noncompliant-count="1" data-total="1"></div>
</div>
</td>
<td class="td-md">
<div style="width:220px">
<div class="chart" data-compliant-count="0" data-incomplete-count="13" data-noncompliant-count="59" data-total="72"></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
div.pivot-container {
width: 100%;
overflow-x: scroll;
overflow-y: visible;
}
div.pivot-container table {
border-collapse: separate;
table-layout: fixed;
}
.pivot-container td {
padding:2px;
margin:0px;
}
.rowLabel {
width: 230px;
height:30px;
}
.td-md {
width: 230px;
height:30px;
}
.chart {
width: 100%;
height:30px;
}
这一行在你的css中造成了一些单元格左侧的边框:
border-collapse:独立的;
如果你删除它，单元格将左对齐。
对于宽度，您已经定义了3个系列。如果值是
14 | 2 | 3 12 | 1 | 1那么顶部条将延长5个刻度。我想你是在寻找一个100%堆叠的酒吧。至少你可以做一个额外的系列来弥补空白到一个共享的最大值，比如100%。
同样，如果您设置valueAxis属性:
valueAxis: {
visible: false,
},
你可以看到它绘制到100%，只是在右边没有任何指示。
我明白了。尽管valueAxis是隐藏的，但它仍在生成中，所以一个75项长的条将具有一个刻度高达90的值轴。我通过显式地将valueAxis max属性设置为堆叠栏的总条目数来解决这个问题:
http://jsfiddle.net/hCb8C/4/valueAxis: {
max: current.data("total"),
visible: false,
line: {
visible: false
},
minorGridLines: {
visible: false
},
majorGridLines: {
visible: false
}
},