2016-08-31 1 views
1

Ich verwende Flot chart mit AngularJs. Ich habe die Anforderung, nur integer Nummer in X-Achse anzuzeigen, das ist getan, aber wenn ich den Maximalwert unter 9 hinzufügen, zeigt es float Wert wie 1.0, 3.0, 5.0 und wenn ich Max-Wert mehr als 9 hinzufügen zeigt es richtige integer Nummer wie 1, 5, 10.

-Code ich bin mit:Nur Ganzzahlen in x-Achsen-Ticks im Flotendiagramm mit angularjs

 var yaxesMax = parseInt(data['b']) > parseInt(data['a']) ? (parseInt(data['b']) + 5) : (parseInt(data['a']) + 5) ; 
     var diagramData = [ 
         [0, data['a']], //0 A Wert 
         [data['c'], data['a']],  //A zu C 
         [data['d'], data['b']], //C zu D 
         [data['e'], data['b']], //D zu E 
         [data['f'], 0], // E zu F 
        ] 
     var multiOptions = { 
      axisLabels: { 
       show:true, 
      }, 
      xaxes: [ 
       { 
        ticks: [data['c'],data['d'],data['e'],data['f']], 
        min: 0, 
        max: data['f'] 
       } 
      ], 
      yaxes: [ 
       { 
        min: 0, 
        max: yaxesMax 
       }, 

      ], 
      grid: { 
       hoverable: true 
      }, 
      tooltip: true, 
      tooltipOpts: { 
       content: function(label, xval, yval, flotItem) { 
        x = new Date(xval); 
        shortTime = x.getHours() + ':' + x.getMinutes(); 
        return 'Day ' + xval + ' | ' + yval + ' ' + label; 
       }, 
       onHover: function (flotItem, $tooltipEl) { 
       } 
      } 
     }; 
     //Ende MultiOptions 

     vmCurvesTaxi.flotMultiData = [ 
      { 
       data: diagramData, 
       points: { 
        show: true, 
       }, 
       lines: { 
        show:true, 
        lineWidth: '3' 
       }, 
       //label: $rootScope.getEinheiten($rootScope.GlobalData.config.volumemessurement) 
      }, 

     ]; 

     vmCurvesTaxi.flotMultiOptions = multiOptions; 



max Wert hinzufügen unter 9: enter image description here



max Wert hinzufügen über 9: enter image description here

+0

Wie sehen die 'xaxis' Optionen aus? Verwenden Sie 'tickDecimals' oder einen' tickFormatter'? Sie müssen den flotbezogenen Code posten, den Sie zum Generieren dieser Diagramme verwenden. – mechenbier

+0

Ich habe den Code hinzugefügt es überprüfen @mechenbier – Jigarb1992

Antwort

1

eine ganze Zahl Darstellung Ihrer xaxis Werte zu erzwingen, setzen die tickDecimals Option 0:

var options = { 
    xaxis: { 
     min: 0, 
     tickDecimals: 0 
    } 
} 

Diese JS Fiddle zeigt ein Arbeitsbeispiel der tickDecimals mit eine kleine Wiederherstellung Ihres Graphen.

+0

Es funktioniert dank @mechenbier – Jigarb1992

Verwandte Themen