Comment créer un graphique à barres de base avec des comptes uniques sur l'axe Y et une catégorie sur l'axe X?

Question

J'aimerais créer un graphique de barre de base avec "Type" sur l'axe des x et le nombre unique sur l'axe des Y.Je n'arrive pas à trouver un exemple de type sur l'axe X (pas même dans le tutoriel)

J'ai le code suivant:

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

Ceci est la donnée

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"
}];

Voici le code que j'ai

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

Vous avez quelques problèmes ici.

Tout d'abord, vous avez des nans dans les données que vous regroupez, vous devez donc changer votre ydimension en quelque chose comme

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

Pour obtenir le crossfilter pour la résumer correctement.

La réponse réelle, cependant, concerne votre échelle x. Vous n'êtes pas simplement compris un, mais cela ressemble à ce que vous parlez est un Échelle ordinale . Les échelles ordinales sont les échelles que vous pensez généralement pour les graphiques à barres; Ils sont un type d'échelle qui a un domaine discret. Dans ce cas, vous pouvez essayer d'ajouter une échelle ordinale comme suit:

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

Donc, il utilise plutôt une échelle ordinale. Puisque vous utilisez DC.JS, vous devrez également spécifier

.xUnits(dc.units.ordinal)

afin qu'il sait utiliser des marques ordinales.

Globalement, j'ai utilisé

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

Et cela a fonctionné bien à ma fin. Selon votre version DC.JS, vous pourrez peut-être omettre le domaine et laisser dc.js la figure automatiquement. Dans ce cas, vous pouvez simplement utiliser

.x(d3.scale.ordinal())