我有2张在Flot中生成的图表。
我想将图表中的条形图移离x轴1条。我希望它具有类似于10个柱形图的间隙。例如，是否有一种更简单的方式指定我希望条形图与y轴相距10像素？
这是生成这些图表的代码：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" language="javascript" src="./flot/jquery-1.8.2.js"></script>
<script type="text/javascript" language="javascript" src="./flot/jquery.flot.js"></script>
<script type="text/javascript" language="javascript" src="./flot/jquery.flot.categories.js"></script>
<style type="text/css">
.graph-container.store-container {
height: 180px !important;
}
.graph-container.operator-container {
height: 450px !important;
}
#top-stores-plot-numbers {
height: 70px !important;
}
#top-operators-plot-numbers {
height: 340px !important;
}
</style>
<script type="text/javascript">
$(function() {
var plotOptions = {
legend: {
show: false
},
series: {
bars: {
show: true,
barWidth: 0.7,
align: "center",
horizontal: true
}
},
yaxis: {
mode: "categories",
tickLength: 2,
axisMargin: 10,
autoscaleMargin: 0.05
},
xaxis: {
autoscaleMargin:0.1,
min: 0,
ticks: 2
}
};
var sn_data = [
[ 6087, "ACME Store"],
];
var sn_ticks = [
[ 0, "ACME Store"],
];
var sn_options = plotOptions;
sn_options["yaxis"]["ticks"] = sn_ticks;
sn_options["yaxis"]["max"] = 1;
$.plot("#top-stores-plot-numbers", [ sn_data ], sn_options);
var on_data = [
[ 50, "CRISTINA"],
[ 68, "CASHIER2"],
[ 96, "MIESZKO"],
[ 115, "CASHIER1"],
[ 209, "TRAINING 1"],
[ 379, "JADE"],
[ 640, "HOST1"],
[ 711, "CAROLINA"],
[ 795, "SUPERVISER"],
[ 1376, "TRAINING"],
];
var on_ticks = [
[ 0, "CRISTINA"],
[ 1, "CASHIER2"],
[ 2, "MIESZKO"],
[ 3, "CASHIER1"],
[ 4, "TRAINING 1"],
[ 5, "JADE"],
[ 6, "HOST1"],
[ 7, "CAROLINA"],
[ 8, "SUPERVISER"],
[ 9, "TRAINING"],
];
var on_options = plotOptions;
on_options["yaxis"]["ticks"] = on_ticks;
on_options["yaxis"]["max"] = 10;
$.plot("#top-operators-plot-numbers", [on_data], on_options);
});
</script>
</head>
<body>
<div class="graph-container store-container">
<h2>Top 10 by Number</h2>
<div id="top-stores-plot-numbers" class="graph-placeholder"></div>
</div>
<div class="graph-container operator-container">
<h2>Top 10 by Number</h2>
<div id="top-operators-plot-numbers" class="graph-placeholder"></div>
</div>
</body>
</html>
最佳答案
您需要更改图表之间的autoscaleMargin，而不是y轴的max。
当您有1 bar时，将其设置为0.5。当您有10条时，将其设置为0.05。删除对yaxis.max的任何提及，应该这样做。
我将您的yaxis对象更改为plotOptions中的样子：
yaxis: {
mode: "categories",
tickLength: 2,
autoscaleMargin: 0.5
}
这就是1条形图所需要的。
在为第二张图调用
$.plot之前，请像这样更改autoscaleMargin： on_options["yaxis"]["autoscaleMargin"] = 0.05;
就是这样，查看实际运行情况（减去category插件）：http://jsfiddle.net/ryleyb/tVmTt/
关于javascript - 在Flot中移动条形图在水平条形图中的位置，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15656196/