2016-05-14 6 views
0

I Multi-Chart Balkendiagramm wie dieseAlle tickvalues ​​nicht auf der X-Achse angezeigt bekommen

http://nvd3.org/examples/multiBar.html

Bis jetzt eine gestapelte mache ich bin der Lage, meine Werte auf Y-Achse und X-Achse drücken auch, aber Das Problem, dem ich gegenüberstehe, ist, dass alle Werte nicht auf der X-Achse angezeigt werden, sondern nur 10 Werte angezeigt werden. Ich verwende die nvD3-Bibliothek in meinem eckigen Code. und Anzeigen des Datums auf der x-Achse.

Dates coming with a gap of 3 days

$scope.options1 = { 
    chart: { 
     type: 'multiBarChart', 
     height: 600, 
     margin: { 
    top: 20, 
    right: 20, 
    bottom: 200, 
    left: 45 
     }, 
     clipEdge: false, 
     duration: 500, 
     stacked: true, 
     groupSpacing: 0.1, 
     useInteractiveGuideline: true, 
     showMaxMin: false, 
     xAxis: { 
    axisLabel: 'Timeline', 
    showMaxMin: false, 
    tickFormat: function(d) { 
    return d3.time.format('%d-%m-%y')(new Date(d)) 
    }, 
    xScale:d3.time.scale(), 
    rotateLabels: '-70' 
     }, 
     yAxis: { 
    axisLabel: 'Pending Bills', 
    axisLabelDistance: -20, 
    groupSpacing: 0.1, 
    tickFormat: function(d) { 
     return d3.format(',f')(d); 
    } 
     } 
    } 
    }; 

Erzeugungswert Array tickt mit dieser Funktion

$scope.options1.chart.xAxis.tickValues = function() { 
     var xTick = _.map(data.data.data[0].values, function(value) { 
    return value.x; 
     }); 
     xTick = _.sortBy(xTick, function(date){ return new Date(date); }); 
     console.log(xTick); 
     return xTick; 
    } 

der Ausgang des console.log (Xtick) ist etwas wie diese, die alle Daten ist -

["2015-09-01", "2015-09-02", "2015-09-03", "2015-09-04", "2015-09-05", "2015-09-06" , "2015-09-07", "2015-09-08", "2015-09-09", "2015-09-10", "2015-09-11", "2015-09-12", "2015-09-13", "2015-09-14", "2015-09-15", "2015-09-16", "2015-09-17", "2015-09-18", " 2015-09-19 "," 2015-09-20 ", " 2015-09-21 "," 2015-09-22 "," 2015-09-23 "," 2015-09-24 "," 2015 "2015-09-26", "2015-09-27", "2015-09-28", "2015-09-29", "2015-09-30", "2015 -10-01 "," 2015-10-02 "," 2015-10-03 "," 2015-10-04 "," 2015-10-05 ", " 2015-10-06 "," 2015- 10-07 "," 2015-10-08 "," 2015-10-09 "," 2015-10-10 ", " 2015-10-11 "," 2015-10-12 "," 2015-10 -13 "," 2015-10-14 "," 2015-10-15 ", " 2015-10-16 "," 2015-10-17 "," 2015-10-18 "," 2015-10- 19 "," 2015-10-20 "]

so viel habe ich über das gelesen. alle Termine auf x-Achse erhalten werden sollte, aber sie sind nicht

+0

Kannst du das auf eine Arbeitsgeige setzen? – Cyril

+0

OK, ich mache es sofort. –

Antwort

1

Wenn Sie alle Zecken auf der X-Achse angezeigt werden soll, können Sie diese Option, um das Diagramm Optionen hinzufügen:

"reduceXTicks": false, 

Für verlängert Option Seite können Sie besuchen:

Angular NVD3 - MultiBarChart

Hoffe, es hilft.

+0

Danke für die Hilfe. Es hat wirklich funktioniert. Noch einmal vielen Dank . –

0
chart: { 
    type: 'chartType', 
    xAxis: { 
     ticks:8 
    } 
} 

Sie können die Eigenschaft "Ticks" versuchen, wenn Sie eine bestimmte Anzahl von Ticks auf der Achse anzeigen möchten.