Come posso creare un grafico a barre di base con conteggi unici sull'asse Y e una categoria sull'asse X?

Question

Mi piacerebbe creare un grafico a barre di base con "tipo" sull'asse X e il conteggio unico sull'asse y.Non riesco a trovare un esempio con il tipo sull'asse x (nemmeno nel tutorial)

Ho il seguente codice:

<div id='dc-bar-chart'></div>

.

Questo è il Data

var data = [{
    date: "2011-11-14T16:17:54Z",
    quantity: 2,
    total: 190,
    tip: 100,
    type: "tab"
}, {
    date: "2011-11-14T16:20:19Z",
    quantity: 2,
    total: NaN,
    tip: 100,
    type: "tab"
}, {
    date: "2011-11-14T16:28:54Z",
    quantity: 1,
    total: 300,
    tip: 200,
    type: "visa"
}, {
    date: "2011-11-14T16:30:43Z",
    quantity: 2,
    total: 90,
    tip: 0,
    type: "tab"
}, {
    date: "2011-11-14T16:48:46Z",
    quantity: 2,
    total: 90,
    tip: 0,
    type: "tab"
}, {
    date: "2011-11-14T16:53:41Z",
    quantity: 2,
    total: 90,
    tip: 0,
    type: "tab"
}, {
    date: "2011-11-14T16:54:06Z",
    quantity: 1,
    total: NaN,
    tip: null,
    type: "cash"
}, {
    date: "2011-11-14T17:02:03Z",
    quantity: 2,
    total: 90,
    tip: 0,
    type: "tab"
}, {
    date: "2011-11-14T17:07:21Z",
    quantity: 2,
    total: 90,
    tip: 0,
    type: "tab"
}, {
    date: "2011-11-14T17:22:59Z",
    quantity: 2,
    total: 90,
    tip: 0,
    type: "tab"
}, {
    date: "2011-11-14T17:25:45Z",
    quantity: 2,
    total: 200,
    tip: null,
    type: "cash"
}, {
    date: "2011-11-14T17:29:52Z",
    quantity: 1,
    total: 200,
    tip: 100,
    type: "visa"
}];

.

Ecco il codice che ho

ndx = new crossfilter(data)

var XDimension = ndx.dimension(function (d) {return d.type;});
var YDimension = XDimension.group().reduceSum(function (d) {return d.total;});

dc.barChart("#dc-bar-chart")
    .width(480).height(150)
    .dimension(XDimension)
    .group(YDimension)
    .centerBar(true)
    .gap(56) 
});
dc.renderAll();

.

Answer 1

Hai qualche problema qui.

In primo luogo, hai nan nei dati che stai aggregando, quindi dovrai cambiare la tua ydimensione a qualcosa come

var YDimension = XDimension.group().reduceSum(function (d) {return isNaN(d.total) ? 0 : d.total;});

.

Per ottenere il crossfilter per riassumere correttamente.

La risposta effettiva, però, riguarda la tua scala X. Attualmente non sei appena incluso, ma suona come stai parlando è un Scala ordinale . Le scale ordinali sono le scale che tipicamente pensano per i grafici a barre; Sono un tipo di scala che ha un dominio discreto. In questo caso, potresti provare ad aggiungere una scala ordinale come:

.x(d3.scale.ordinal().domain(["visa", "cash", "tab"]))

.

Quindi usa invece una scala ordinale. Dal momento che stai usando DC.JS, dovrai anche specificare

.xUnits(dc.units.ordinal)

.

In modo che sappia usare i marchi ordinali.

Complessivamente, ho usato

dc.barChart("#dc-bar-chart")
    .width(480).height(150)
    .x(d3.scale.ordinal().domain(["visa", "cash", "tab"]))
    .xUnits(dc.units.ordinal)
    .dimension(XDimension)
    .group(YDimension)
    .centerBar(false);

.

E ha funzionato bene sulla mia estremità. A seconda della versione DC.JS, potresti essere in grado di omettere il dominio e lasciare che DC.JS figurasse automaticamente. In tal caso, potresti semplicemente usare

.x(d3.scale.ordinal())

.