Die Verschiebung der position der Balken in einer horizontalen Balkendiagramm Flot
Ich habe 2 charts, die generiert werden, in Flot.
Ich würde gerne verschieben Sie den Balken im Diagramm mit 1 bar Weg von der x-Achse. Ich würde es gerne haben Lücken, die ähnlich zu der Kurve mit 10 bars. Zum Beispiel, gibt es eine einfachere Art und Weise angeben, dass ich will, dass die bar um 10 Pixel entfernt von der y-Achse?
Dies ist der code, der generiert diese charts:
<!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>
Du musst angemeldet sein, um einen Kommentar abzugeben.
Müssen Sie ändern die
autoscaleMargin
zwischen Graphen, nicht diemax
für die y-Achse.Wenn man 1 bar, legen Sie es auf
0.5
. Wenn Sie 10 bars, es die0.05
. Nehmen Sie jede Erwähnung vonyaxis.max
und das sollte es tun.Ich geändert, yaxis Objekt zu schauen, wie diese in
plotOptions
:Das ist alles, was Sie brauchen für die 1 bar-graph.
Bevor Sie
$.plot
für die 2. Grafik, ändern Sie dieautoscaleMargin
etwa so:Ist es, ihn in Aktion zu sehen ist (ohne das Kategorien-plugin): http://jsfiddle.net/ryleyb/tVmTt/
autoscaleMargin
sollte festgelegt werden, zu C/n, wobei C eine Konstante ist und n die Anzahl der Elemente? In diesem Fall wäre C 0.5, also wenn es 1 Punkt 0.5/1 = 0.5, und wenn es 10 Stück 0.5/10 = 0.05? Wird dies auch für eine beliebige Anzahl von Elementen?