Avoir des problèmes avec le graphique à barres jqPlot

J’utilise jqPlot pour créer un graphique à barres, mais j’ai rencontré quelques problèmes.

Problème 1: Les premières et dernières barres du graphique sont coupées. Seule la moitié affiche

Problème 2: je ne veux pas que mes points de données s’étendent sur tout l’axe des x. Faut-il que les données ne couvrent pas tout l’axe des x?

entrez la description de l'image ici ex: c’est ce qui est fait en ce moment.

Ce sont les données que je suis en train de transmettre

var chartData = [["19-Jan-2012",2.61],["20-Jan-2012",5.00],["21-Jan-2012",6.00]]

C’est le jquery que j’utilise.

  // Plot chart function PlotChart(chartData, numberOfTicks) { $.jqplot.config.enablePlugins = true; var plot2 = $.jqplot('chart1', [chartData], { title: 'Mouse Cursor Tracking', seriesDefaults:{ renderer: $.jqplot.BarRenderer, rendererOptions: { barPadding: 1, barMargin: 15, barDirection: 'vertical', barWidth: 50 }, pointLabels: { show: true } }, axes: { xaxis: { pad: 0, // a factor multiplied by the data range on the axis to give the numberTicks: numberOfTicks, renderer: $.jqplot.DateAxisRenderer, // renderer to use to draw the axis, tickOptions: { formatSsortingng: '%b %#d' // format ssortingng to use with the axis tick formatter } }, yaxis: { tickOptions: { formatSsortingng: '$%.2f' } } }, highlighter: { sizeAdjust: 7.5 }, cursor: { show: true } }); }

De la façon dont vous souhaitez que votre plot ressemble, vous éviterez beaucoup de problèmes si vous passez à l’utilisation de CategoryAxisRenderer au lieu de DateAxisRenderer. CategoryAxisRenderer est bien meilleur pour afficher des regroupements discrets de données que pour une vraie série chronologique.

 var axisDates = ["Jan 19", "Jan 20", "Jan 21"] var chartData = [2.61,5.00,6.00] $.jqplot.config.enablePlugins = true; var plot2 = $.jqplot('chart2', [chartData], { title: 'Some Plot', seriesDefaults:{ renderer: $.jqplot.BarRenderer, rendererOptions: { barPadding: 1, barMargin: 15, barDirection: 'vertical', barWidth: 50 }, pointLabels: { show: true } }, axes: { xaxis: { renderer: $.jqplot.CategoryAxisRenderer, ticks: axisDates }, yaxis: { tickOptions: { formatSsortingng: '$%.2f' } } }, highlighter: { sizeAdjust: 7.5 }, cursor: { show: true } });

entrez la description de l'image ici

DateAxisRenderer est vraiment destiné aux graphiques linéaires, pas aux graphiques à barres. Lorsque vous le combinez avec des graphiques à barres, cela ne fonctionne tout simplement pas. L’idée / objective de DateAxisRenderer est de créer un graphique temporel linéaire / précis sur une date / heure. De cette façon, si vous manquez une entrée de date, elle sera toujours dessinée à l’échelle du temps. Consultez leurs exemples sur DateAxisRenderer ici: http://www.jqplot.com/tests/date-axes.php

Ce que vous voulez utiliser, c’est CategoryAxisRenderer. Vous pouvez alors simplement remplacer / créer votre propre rendu d’étiquette de tick et être prêt à partir. Normalement, vous ne voudriez pas append d’éléments vides supplémentaires à un élément, en particulier s’ils sont vides. Toutefois, si vous le faites, ajoutez-les simplement à votre tableau de données.

Voici un jsfiddle faisant ce que vous voulez: http://jsfiddle.net/fordlover49/JWhmQ/

Notez que vous voudrez peut-être consulter la section sur la gestion des ressources pour déterminer les fichiers à référencer (en plus du fichier jQuery).

Voici le javascript au cas où jsfiddle agirait:

 $.jqplot.config.enablePlugins = true; var chartData = [["19-Jan-2012", 2.61], ["20-Jan-2012", 5.00], ["21-Jan-2012", 6.00]]; // add a custom tick formatter, so that you don't have to include the entire date renderer library. $.jqplot.DateTickFormatter = function(format, val) { // for some reason, format isn't being passed through properly, so just going to hard code for purpose of this jsfiddle val = (new Date(val)).getTime(); format = '%b&nbsp%#d' return $.jsDate.strftime(val, format); }; function PlotChart(chartData, extraDays) { // if you want extra days, just append them to your chartData array. if (typeof extraDays === "number") { for (var i = 0; i < extraDays; i++) { var actualDate = new Date(chartData[chartData.length - 1]); // convert last entry to actual date var newDate = new Date(actualDate.getFullYear(), actualDate.getMonth(), actualDate.getDate() + 1); // create new increased date chartData.push([newDate, 0]); } } var plot2 = $.jqplot('chart1', [chartData], { title: 'Mouse Cursor Tracking', seriesDefaults: { renderer: $.jqplot.BarRenderer, rendererOptions: { barPadding: 1, barWidth: 50 }, pointLabels: { show: true } }, axes: { xaxis: { pad: 1, // a factor multiplied by the data range on the axis to give the renderer: $.jqplot.CategoryAxisRenderer, // renderer to use to draw the axis, tickOptions: { formatString: '%b %#d', formatter: $.jqplot.DateTickFormatter } }, yaxis: { tickOptions: { formatString: '$%.2f' } } }, highlighter: { sizeAdjust: 7.5 }, cursor: { show: true } }); } PlotChart(chartData, 3);

Voici un simple bidouillage que j’avais l’habitude de montrer une marge.

Je crée une date de début et une date de fin qui sont respectivement la veille et la veille du contenu que je souhaite afficher.

Par exemple, si je veux afficher le mois de janvier 2012

 var startingDate = new Date(2012, 0, 0); //=> 31th Dec 2011 var endingDate = new Date(2012, 1, 1); //=> 1st Feb 2012

Ensuite, je déclare mon propre DateTickFormatter où je ne vais pas imprimer ces deux dates.

 $.jqplot.DateTickFormatter = function(format, val) { if (!format) { format = '%Y/%m/%d'; } if(val==startingDate.getTime() || val==endingDate.getTime()){ return ""; }else{ return $.jsDate.strftime(val, format); } };

Ensuite, dans la xaxis je mets les options suivantes:

 xaxis : { renderer:$.jqplot.DateAxisRenderer, min:startingDate, max:endingDate, tickInterval:'1 day' }