est-il possible d'atteindre un graphique à barres empilée latérale à l'aide de JQPLOT? Par exemple, l'axe X serait un mois donné et pour chaque mois, vous auriez un certain nombre de barres empilées.
quelque chose comme ceci:
Remarque: Je demande quelque chose de différent que juste un graphique empilé normal. S'il vous plaît regarder la photo pour mieux comprendre ce que j'essaie de faire.
3 Réponses :
Oui, il est possible de le faire.
avec référence de JQPLOT < / a> code source:
Je ne dois pas me faire claire. Jetez un coup d'œil à la photo liée. Ce que vous montrez est juste pour une carte à barres empilée avec une seule barre par valeur d'axe x. Je cherche à créer une carte à barres empilée avec plusieurs barres par valeur d'axe x.
Personne n'a créé cette capacité pour JQPlot. Ce gars a dit qu'il allait. Utilisez une bibliothèque différente comme Flot, écrivez vous-même un plugin pour JQPLOT ou convaincre quelqu'un d'autre de le faire! Si vous utilisez FLOT, on dirait qu'ils ont un patch qui permet cette fonctionnalité ici mais il n'a pas 't été fusionné dans.
Vous devrez tracer deux graphiques sur la même base de parcelle qui va bien faire si vous ne voulez pas d'embout d'outil ou de quelque chose, car il ne fonctionnera que sur une partie de l'intrigue, essayez ceci-
$(document).ready(function(){
/* graph config */
var maxVal = 13;
/* graph vals */
var Bar1 = [5, 0, 10, 0, 12, 0];
var Bar2 = [0, 17, 0, 20, 0, 12 ];
var BaseVals=[0,0,0,0,0,0];
/* graph ticks */
var baseTicks=['Americas','','Europe','','Asia','']
var EmptyTicks=['','','','','','']
/* plot the base graph */
plotbase = $.jqplot('chart3', [BaseVals], {
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {barMargin: 10},
pointLabels: {show: false}
},
axesDefaults: {show: false},
tickOptions: {showMark: false, angle: 90},
axes: {
showLabel: false,
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: baseTicks,
tickOptions: {markSize: 0}
},
yaxis: {
padMin: 0,
min: 0,
max: maxVal,
showLabel: false,
show: false
}
}
});
plot2 = $.jqplot('chart3', [Bar1], {
seriesColors: ["#67ce64", "#da9831","#67ce64", "#da9831"],\\this can be changed
stackSeries: true,
captureRightClick: true,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {barMargin: 10, highlightMouseOver: true},
pointLabels: {show: false}
},
axesDefaults: {show: false},
tickOptions: {showMark: false},
axes: {
showLabel: false,
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: EmptyTicks
},
yaxis: {
padMin: 0,
min: 0,
max: maxVal,
showLabel: false,
show: false
}
},
grid: {background: 'transparent', drawGridLines: false, gridLineColor: 'transparent', borderColor: 'transparent'}
});
plot1 = $.jqplot('chart3', [Bar2], {
stackSeries: true,
captureRightClick: true,
seriesColors: ["#effa38", "#37d1f8", "#5129b6","#5129b6"],//this can be changed
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {barMargin: 10, highlightMouseOver: true },
pointLabels: {show: false}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
tickRenderer:$.jqplot.CanvasAxisTickRenderer,
ticks: EmptyTicks,
tickOptions: {
angle: -90,
}
},
yaxis: {
padMin: 0,
min: 0,
max: maxVal
}
}, grid: {background: 'transparent', drawGridLines: false, gridLineColor: 'transparent', borderColor: 'transparent'}
});
});