Comment créer un graphique à barres de base avec des comptes uniques sur l'axe Y et une catégorie sur l'axe X?
-
21-12-2019 - |
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();
La solution
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())