mostrar - graficas html javascript
Mostrar valores en la parte superior de las barras en un barChart (4)
Aquí hay un poco de una solución hacky usando el método de renderlet . jsFiddle : http://jsfiddle.net/tpsc5f9f/4/
JS
var barChart = dc.barChart("#Chart")
.width(480).height(300)
.dimension(XDimension)
.group(YDimension)
.transitionDuration(500)
.xUnits(dc.units.ordinal)
.x(d3.scale.ordinal().domain(XDimension))
dc.renderAll();
barChart.renderlet(function(chart){
moveGroupNames();
});
function moveGroupNames() {
var $chart = $(''#Chart''),
bar = $chart.find(''.bar'');
bar.each(function (i, item) {
var bar_top = this.height.baseVal.value;
var bar_left = this.width.baseVal.value;
var bar_offset_x = 30;
var bar_offset_y = 33;
var bar_val = $(this).find(''title'').html().split('':'')[1];
$chart.append(''<div class="val" style="bottom:''+(bar_top+bar_offset_y)+''px;left:''+((bar_left*i)+(bar_offset_x))+''px;width:''+bar_left+''px">''+bar_val+''</div>'');
});
}
CSS agregado
body {
margin-top:20px;
}
#Chart {
position:relative;
}
#Chart .val {
position:absolute;
left:0;
bottom:0;
text-align: center;
}
Tengo un gráfico de barras con escala ordinal para el eje x. Quiero mostrar los valores y en la parte superior de cada barra o en la parte inferior de cada barra. También sería aceptable mostrar los valores de y cuando uno pasa sobre la barra. ¿Hay una función o una forma en un dc.js para hacer eso? Aquí está el jsfiddle y mi código está debajo de la imagen>
Editar: Aquí está mi código: HTML
<body>
<div id=''Chart''>
</div>
</body>
JS
var data = [{
Category: "A",
ID: "1"
}, {
Category: "A",
ID: "1"
}, {
Category: "A",
ID: "1"
}, {
Category: "A",
ID: "2"
}, {
Category: "A",
ID: "2"
}, {
Category: "B",
ID: "1"
}, {
Category: "B",
ID: "1"
}, {
Category: "B",
ID: "1"
}, {
Category: "B",
ID: "2"
}, {
Category: "B",
ID: "3"
}, {
Category: "B",
ID: "3"
}, {
Category: "B",
ID: "3"
}, {
Category: "B",
ID: "4"
}, {
Category: "C",
ID: "1"
}, {
Category: "C",
ID: "2"
}, {
Category: "C",
ID: "3"
}, {
Category: "C",
ID: "4"
}, {
Category: "C",
ID: "4"
},{
Category: "C",
ID: "5"
}];
var ndx = crossfilter(data);
var XDimension = ndx.dimension(function (d) {
return d.Category;
});
var YDimension = XDimension.group().reduceCount(function (d) {
return d.value;
});
dc.barChart("#Chart")
.width(480).height(300)
.dimension(XDimension)
.group(YDimension)
.transitionDuration(500)
.xUnits(dc.units.ordinal)
.label(function(d) {return d.value})
.x(d3.scale.ordinal().domain(XDimension))
dc.renderAll();
Esta función reubicará las etiquetas de un gráfico de filas al final de cada fila. Una técnica similar podría usarse para un gráfico de barras usando el atributo "y".
- Las etiquetas se animan junto con la fila rect, usando la transición del gráficoDuración
- Utiliza el valor de la función del archivoAccessor
- Usa la escala xAxis de la gráfica para calcular la posición de la etiqueta
rowChart.on(''pretransition'', function(chart) {
var padding = 2;
chart.selectAll(''g.row > text'') //find all row labels
.attr(''x'', padding) //move labels to starting position
.transition() //start transition
.duration(chart.transitionDuration()) //use chart''s transitionDuration so labels animate with rows
.attr(''x'', function(d){ //set label final position
var dataValue = chart.valueAccessor()(d); //use chart''s value accessor as basis for row label position
var scaledValue = chart.xAxis().scale()(dataValue); //convert numeric value to row width
return scaledValue+padding; //return scaled value to set label position
});
});
Si utiliza un ValueAccessor especializado con un gráfico, puede realizar la siguiente sustitución en la solución "D3-ish way" de dimirc.
Cambio
.text(function(d){
return d3.select(d).data()[0].data.value
})
A
.text(function(d){
return chart.valueAccessor()(d3.select(d).data()[0].data)
});
Ver jsfiddle actualizado
.renderlet(function(chart){
var barsData = [];
var bars = chart.selectAll(''.bar'').each(function(d) { barsData.push(d); });
//Remove old values (if found)
d3.select(bars[0][0].parentNode).select(''#inline-labels'').remove();
//Create group for labels
var gLabels = d3.select(bars[0][0].parentNode).append(''g'').attr(''id'',''inline-labels'');
for (var i = bars[0].length - 1; i >= 0; i--) {
var b = bars[0][i];
//Only create label if bar height is tall enough
if (+b.getAttribute(''height'') < 18) continue;
gLabels
.append("text")
.text(barsData[i].data.value)
.attr(''x'', +b.getAttribute(''x'') + (b.getAttribute(''width'')/2) )
.attr(''y'', +b.getAttribute(''y'') + 15)
.attr(''text-anchor'', ''middle'')
.attr(''fill'', ''white'');
}
})
Si no desea que las etiquetas estén visibles cuando las barras se vuelven a dibujar (por ejemplo, cuando las barras cambian después de que el usuario filtre / haga clic en otro gráfico) puede mover la comprobación de los valores anteriores de renderlet a un oyente preRedraw .
.on("preRedraw", function(chart){
//Remove old values (if found)
chart.select(''#inline-labels'').remove();
})
Alternativa
Manera D3-ish
Demo jsfiddle
.renderlet(function (chart) {
//Check if labels exist
var gLabels = chart.select(".labels");
if (gLabels.empty()){
gLabels = chart.select(".chart-body").append(''g'').classed(''labels'', true);
}
var gLabelsData = gLabels.selectAll("text").data(chart.selectAll(".bar")[0]);
gLabelsData.exit().remove(); //Remove unused elements
gLabelsData.enter().append("text") //Add new elements
gLabelsData
.attr(''text-anchor'', ''middle'')
.attr(''fill'', ''white'')
.text(function(d){
return d3.select(d).data()[0].data.value
})
.attr(''x'', function(d){
return +d.getAttribute(''x'') + (d.getAttribute(''width'')/2);
})
.attr(''y'', function(d){ return +d.getAttribute(''y'') + 15; })
.attr(''style'', function(d){
if (+d.getAttribute(''height'') < 18) return "display:none";
});
})