poner - ¿Cómo controlo el tamaño de la etiqueta de tick en flot
que es tags h1 y cursiva (4)
Tengo un gráfico de barras básico que presento en flot (5 barras, mostrando el% por estado).
$.plot($("#placeholder"), [
{
label: ''Failed'',
data: [[0,10]],
bars: { show: true }
},
{
label: ''Passed'',
data: [[1,15]],
bars: { show: true }
},
{
label: ''Not Run'',
data: [[2,30]],
bars: { show: true }
},
{
label: ''Blocked'',
data: [[3,5]],
bars: { show: true }
},
{
label: ''In Progress'',
data: [[4,40]],
bars: { show: true }
}
],
{
xaxis: {
ticks: [[0.5, "Failed"], [1.5, "Passed"], [2.5, "Not Run"], [3.5, "Blocked"], [4.5, "In Progress"]]
},
legend: {
show: false
}
});
Estoy encontrando que la fuente utilizada para los valores de tilde en el eje x es un poco demasiado grande, especialmente cuando el gráfico se muestra en dimensiones pequeñas, es decir. 240x100. He leído la documentación de la API, pero no puedo encontrar cómo controlar los tamaños de las etiquetas.
¿Es esto posible OOTB?
Las dos respuestas anteriores no funcionarán en la última versión de flot, ya que ya no usan texto ''real'' (el texto se dibuja en su lugar). En su lugar, especifique estas opciones:
{xaxis: {font: size: some_number}, yaxis: {font: size: some_number}}
(reemplace some_number con el tamaño deseado en puntos)
No parece que pueda establecer el tamaño de fuente a través de la API, pero puede usar css para establecer el tamaño de las etiquetas.
.tickLabel { font-size: 80% }
Usé lo siguiente:
Archivo CSS / Archivo SCSS
#graph_label .tickLabel{
font-size: 50%;
}
Index.html o lugar donde está trazando el área de gráfico
$.plot($("graph_label"), [dataArrayReference], options);
Ref: La respuesta de @BrentM Arriba
PD: estoy usando Flot Version antes de 0.8.1 así que no tengo idea de cómo funcionaría la última versión
Aquí hay un ejemplo directamente de la API:
xaxis:{
font:{
size:11,
style:"italic",
weight:"bold",
family:"sans-serif",
variant:"small-caps"
}
}