我必须做什么才能并排显示所有图表？
我试着把它插入
"div class="row"
但它不起作用。
因此我构建了一个 little example on JSFiddle :
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script>
</head>
<body>
<div class="k-content">
<div id="example_1"></div>
<div id="example_2"></div>
<div id="example_3"></div>
<div id="example_4"></div>
<div id="example_5"></div>
</div>
<script>
var seriesData = [{
productname: "Product One",
volume: 65.50
}];
$(document).ready(function() {
// -----------------------------------------------------------------------
function createChart(ChartType, Placeholder, MaxValue) {
$("#" + Placeholder).kendoChart({
theme: "metro",
title: {
font: "12px Arial,Helvetica,sans-serif",
color: "#29952D",
text: "Name: " + Placeholder
},
dataSource: {
data: seriesData
},
seriesDefaults: {
labels: {
template: "#=kendo.format('{0:n2}', (Math.abs(value)))# ltr",
position: "outsideEnd",
visible: true,
background: "transparent"
}
},
series: [{
type: ChartType,
field: "volume",
categoryField: "productname",
}],
valueAxis: [{
min: 0,
max: MaxValue
}],
chartArea: {
width: 125,
height: 175
},
tooltip: {
template: "#=kendo.format('{0:n2}', (Math.abs(value)))# ltr",
visible: true
},
}) // kendoChart
} // function
// -------------------------------------------------------------------
createChart("column", "example_1", 200);
createChart("column", "example_2", 250);
createChart("column", "example_3", 300);
createChart("column", "example_4", 100);
createChart("pie", "example_5", 450);
// -----------------------------------------------------------------------
}); // $(document).ready(function()
</script>
</body>
</html>
最佳答案
您可以使用 css float: left 和 width: 20%(同时从图表中删除宽度设置并让它填充 div):
<div class="k-content">
<div id="example_1" class="sidebyside"></div>
<div id="example_2" class="sidebyside"></div>
<div id="example_3" class="sidebyside"></div>
<div id="example_4" class="sidebyside"></div>
<div id="example_5" class="sidebyside"></div>
</div>
.sidebyside {
width: 20%;
float: left;
}
Updated FIDDLE
关于jquery - Kendo UI - 并排显示图表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33758805/