jquery - graficas - Tener problemas con el gráfico de barras jqPlot

graficas html javascript

Question

Estoy usando jqPlot para crear un gráfico de barras, pero me encontré con algunos problemas.

Problema 1: la primera y la última barra del gráfico están cortadas. Solo la mitad se muestra

Problema 2: No quiero que mis puntos de datos abarquen todo el eje x. ¿Hay que dejar que los datos abarquen todo el eje x?

ex: Esto es lo que hace ahora.

Estos son los datos que estoy transmitiendo

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

Este es el jquery que estoy usando.

 // 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: {
formatString: ''%b %#d'' // format string to use with the axis tick formatter
}
},
yaxis: {
tickOptions: {
formatString: ''$%.2f''
}
}
},
highlighter: {
sizeAdjust: 7.5
},
cursor: {
show: true
}
});
}

Answer 1

DateAxisRenderer está diseñado para gráficos de líneas, no gráficos de barras. Cuando lo combinas con gráficos de barras, simplemente no funciona bien. La idea / objetivo de DateAxisRenderer es hacer un gráfico de tiempo lineal / preciso a través de una fecha / hora. De esta forma, si pierde una entrada de fecha, aún se dibujará para escalar con el tiempo. Verifique sus ejemplos en DateAxisRenderer aquí: http://www.jqplot.com/tests/date-axes.php

Lo que quieres usar es CategoryAxisRenderer. A continuación, puede simplemente anular / crear su propio renderizador de etiquetas y estar listo para continuar. Normalmente, no le conviene agregar elementos vacíos adicionales a un elemento, especialmente si están vacíos; sin embargo, si lo hace, simplemente agréguelos a su matriz de datos.

Aquí hay un jsfiddle haciendo lo que quieras: http://jsfiddle.net/fordlover49/JWhmQ/

Tenga en cuenta que es posible que desee consultar la sección de administración de recursos para verificar a qué archivos debe hacer referencia (además del archivo jquery).

Aquí está el javascript en caso de que jsfiddle actúe:

$.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);

Answer 2

De cómo quieres que se vea tu trama, te ahorrarás muchos problemas si pasas a utilizar CategoryAxisRenderer en lugar de DateAxisRenderer. El CategoryAxisRenderer es mucho mejor para mostrar agrupaciones discretas de datos que como una verdadera serie temporal.

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: {
formatString: ''$%.2f''
}
}
},
highlighter: {
sizeAdjust: 7.5
},
cursor: {
show: true
}
});

Answer 3

Aquí hay un truco simple que solía mostrar un margen.

Creo una fecha de inicio y una fecha de finalización, respectivamente, un día antes y un día después de los contenidos que deseo mostrar.

Por ejemplo, si quiero mostrar el mes de enero de 2012

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

Luego declaro mi propio DateTickFormatter donde no imprimiré estas dos fechas.

$.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);
}
};

Luego en el xaxis pongo las siguientes opciones:

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