我有几个单独的图表，并且已禁用所有axi（轴？），这样我就可以在表格的每个单元格中放置一个简单的堆叠条：
根据此论坛，图表应采用其父元素的宽度。我尝试在图表上设置显式宽度和100％，并将每个图表包装在具有明确宽度的div中。但是，如果你滚动到第三列测试，那么从小提琴你可以看到宽度变化，它看起来真的很草率。我想为图表设置一个明确的固定像素数。最终，我将根据最高相对总数计算每个宽度，以便正确缩放。然而，在我走得那么远之前，我需要至少让他们尊重宽度设置。
如何让所有图表都符合宽度设置？
$(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
});
HTML：
<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>
CSS：
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;
}
答案 0 :(得分：1)
你的css中的这一行导致某些单元格左侧出现边框：
border-collapse：separate;
如果删除它，细胞将保持对齐。
对于宽度，您定义了3个系列。如果值是
14 | 2 | 3
12 | 1 | 1
然后顶部栏将延长5个刻度。我想你正在寻找一个100％堆叠的酒吧。至少你可以制作一个额外的系列来弥补100％的共享最大值。
另外，如果同样设置valueAxis属性：
valueAxis: {
visible: false,
},
你可以看到它正在绘制到100％，你只是没有任何正确的指示。
答案 1 :(得分：0)
我明白了。即使valueAxis被隐藏，它仍然被生成，所以一个75项长的条形将有一个值为90的刻度值。我通过明确地将valueAxis max 属性设置为任意来修复此问题。这些堆积条的总项目是：
valueAxis: {
max: current.data("total"),
visible: false,
line: {
visible: false
},
minorGridLines: {
visible: false
},
majorGridLines: {
visible: false
}
},