2017-01-23 5 views
0

Ich verwende HighChart, um die Speicherbelegung einiger Container anzuzeigen. Das Problem ist, dass manchmal die Skala in K manchmal in M ​​ist und manchmal mit nichts (wie auf dem Bild unten): enter image description hereSo ändern Sie den Maßstab einer Achse mit HighChart

Und das ist, wie ich meine HighChart erstellen:

var cursor = Template.currentData(); 
    liveChart = Highcharts.chart(cursor.chart_id, { 
     title: { 
      text: 'Memory usage of the controlcontainers_mongo_1' 
     }, 
     xAxis: { 
      type: 'datetime', 
     }, 
     yAxis: { 
      title: { 
       text: 'usage' 
      } 
     }, 
     tooltip: { 
      formatter: function() { 
       return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>'; 
      } 
     }, 
     series: [{ 
      type: 'line', 
      name: 'memory usage', 
      data: [] 
     }] 
    }); 

[EDIT] Vielleicht es könnte hilfreich sein, um die gesamte Grafik zu sehen, so gibt es: enter image description here

das ist mein Formatierer, wenn jemand es brauchen:

formatter: function() { 
       var usage = this.value; 
       if((usage >= 1000000)&&(usage < 1000000000)){ 
        return (usage/1000000).toFixed(2) + "MB"; 
       }else if (usage >= 1000000000) { 
        return (usage/1000000000).toFixed(2) + "GB"; 
       }else{ 
        return usage + "KB"; 
       } 
       } 
+0

Haben Sie K aufrunden Werte zum nächsten Komma abzurunden wollen? –

+0

Ja könnte es die Arbeit tun, aber ich denke, wie auf dem Bild, das ich fügte, sollte M anzeigen, weil 56600k besser in M ​​angezeigt werden würde und wenn die Verwendung 56600M ist, sollte es in G sein. Sie sehen die Logik? – Jerome

+0

Ich habe den Weg erwähnt, um auf den Wert des Etiketts in Y-Achse zuzugreifen, Sie können damit spielen und anzeigen, wie Sie wollen –

Antwort

0

Sie können die Werte in y-Achsen-Formatierungsfunktion

var cursor = Template.currentData(); 
 
    liveChart = Highcharts.chart(cursor.chart_id, { 
 
     title: { 
 
      text: 'Memory usage of the controlcontainers_mongo_1' 
 
     }, 
 
     xAxis: { 
 
      type: 'datetime', 
 
     }, 
 
     yAxis: { 
 
      title: { 
 
       text: 'usage' 
 
      }, 
 
      labels: { 
 
       formatter: function() { 
 
        //This will round the value, but you can do anything to this value now 
 
        return this.value.toFixed(2); 
 
       } 
 
      }, 
 
     }, 
 
     tooltip: { 
 
      formatter: function() { 
 
       return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>'; 
 
      } 
 
     }, 
 
     series: [{ 
 
      type: 'line', 
 
      name: 'memory usage', 
 
      data: [] 
 
     }] 
 
    });

Lesen Sie mehr here

Verwandte Themen