简体   繁体   中英

How to change the scale of an axis with HighChart

I'm using HighChart to display the memory usage of some containers. The problem is that sometimes the scale is in K sometimes in M and sometimes with nothing (like the picture bellow): 在此处输入图片说明

And this is how I create my HighChart:

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] Maybe it could be helpful to see the entire graph so there is it: 在此处输入图片说明

This is my formatter if someone need it:

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";
                 }
               }

You can round up the values in y-axis formatting function

  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: [] }] }); 

Read more here

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM