graphique linéaire nvd3 avec des valeurs de chaîne sur l'axe des abscisses
je suis nouveau au nvd3 charts. j'ai besoin d'un graphique linéaire, avec des valeurs de chaîne sur l'axe des abscisses le graphique devrait être comme ceci Diagramme À Barres, mais j'ai besoin d'une ligne, au lieu de bars
mon résultat ressemble à ceci Graphique Linéaire Les valeurs sont toutes mappées à x=0
mon code
nv.addGraph(function() {
var chart = nv.models.lineChart()
.useInteractiveGuideline(true)
.transitionDuration(350)
.x(function(d) { return d.x})
.y(function(d) { return d.y})
.showLegend(true)
.showYAxis(true)
.showXAxis(true);
chart.xAxis.tickValues(["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]);
d3.select(element + ' svg')
.datum(data)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
et mes données
[{"color":"#a215af","key":"products","values":[
{"label":"Monday","y":0,"x":"Monday"},
{"label":"Tuesday","y":0,"x":"Tuesday"},
{"label":"Wednesday","y":1,"x":"Wednesday"},
{"label":"Thursday","y":6,"x":"Thursday"},
{"label":"Friday","y":2,"x":"Friday"},
{"label":"Saturday","y":0,"x":"Saturday"},
{"label":"Sunday","y":13,"x":"Sunday"}]}]
j'ai essayé beaucoup, mais je ne sais pas quoi faire.
toute aide ou suggestion serait grand
Solution comme dcclassics mentionné j'ai pris des valeurs de nombre au lieu de chaînes et puis utilisé tickValues et tickFormat:
var days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
chart.xAxis.tickValues([0, 1, 2, 3, 4, 5, 6])
.tickFormat(function(d){
return days[d]
});
16
demandé sur
tobeController
2014-05-19 02:43:20
2 réponses
comme dcclassics mentionné, j'ai pris des valeurs de nombre au lieu de chaînes et j'ai ensuite utilisé tickValues et tickFormat:
var days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
chart.xAxis.tickValues([0, 1, 2, 3, 4, 5, 6])
.tickFormat(function(d){
return days[d]
});
ces solutions ont fonctionné pour moi
15
répondu
tobeController
2015-05-19 12:40:52
solution de travail:
var data = [{"color":"#a215af","key":"products","values":[
{"y":0,"x":0},
{"y":0,"x":1},
{"y":1,"x":2},
{"y":6,"x":3},
{"y":2,"x":4},
{"y":0,"x":5},
{"y":13,"x":6}]}]
nv.addGraph(function() {
var chart = nv.models.lineChart()
.useInteractiveGuideline(true)
.transitionDuration(350)
.x(function(d) { return d.x})
.y(function(d) { return d.y})
.showLegend(true)
.showYAxis(true)
.showXAxis(true);
var days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
chart.xAxis
.tickValues([0, 1, 2, 3, 4, 5, 6])
.tickFormat(function(d){
return days[d]
});
d3.select(element + ' svg')
.datum(data)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
5
répondu
Régis
2015-03-17 22:41:45