Javascript 如何使用HighChart更改轴的比例
我正在使用HighChart显示一些容器的内存使用情况。问题是,有时刻度以K为单位,有时以M为单位,有时什么都没有(如下图所示): 这就是我创建HighChart的方式:Javascript 如何使用HighChart更改轴的比例,javascript,highcharts,Javascript,Highcharts,我正在使用HighChart显示一些容器的内存使用情况。问题是,有时刻度以K为单位,有时以M为单位,有时什么都没有(如下图所示): 这就是我创建HighChart的方式: var cursor = Template.currentData(); liveChart = Highcharts.chart(cursor.chart_id, { title: { text: 'Memory usage of the controlcontainers_
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: []
}]
});
var cursor=Template.currentData();
liveChart=Highcharts.chart(cursor.chart\u id{
标题:{
文本:“controlcontainers\u mongo\u 1的内存使用”
},
xAxis:{
键入:“日期时间”,
},
亚克斯:{
标题:{
文本:“用法”
}
},
工具提示:{
格式化程序:函数(){
返回'+this.series.name+'
'+Highcharts.dateFormat(“%Y-%m-%d%H:%m:%S',this.x)+'
';
}
},
系列:[{
键入:“行”,
名称:'内存使用',
数据:[]
}]
});
[编辑]可能有助于查看整个图形,因此:
如果有人需要,这是我的格式化程序:
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";
}
}
格式化程序:函数(){
var用法=此值;
如果((使用量>=1000000)和&(使用量<100000000)){
返回值(使用率/1000000.toFixed(2)+“MB”;
}否则如果(使用量>=100000000){
返回值(使用量/1000000000.toFixed(2)+“GB”;
}否则{
返回用法+“KB”;
}
}
您可以在y轴格式化功能中对值进行四舍五入
var cursor=Template.currentData();
liveChart=Highcharts.chart(cursor.chart\u id{
标题:{
文本:“controlcontainers\u mongo\u 1的内存使用”
},
xAxis:{
键入:“日期时间”,
},
亚克斯:{
标题:{
文本:“用法”
},
标签:{
格式化程序:函数(){
//这将对值进行四舍五入,但现在可以对此值执行任何操作
返回此.value.toFixed(2);
}
},
},
工具提示:{
格式化程序:函数(){
返回'+this.series.name+'
'+Highcharts.dateFormat(“%Y-%m-%d%H:%m:%S',this.x)+'
';
}
},
系列:[{
键入:“行”,
名称:'内存使用',
数据:[]
}]
});
是否要将K值四舍五入到最接近的小数点?是的,它可以完成这项工作,但我认为就像我添加的图片中一样,它应该显示M,因为56600k最好显示为M,然后如果使用量为56600M,它应该显示为G。您看到逻辑了吗?我提到了访问Y轴中标签值的方法,你可以玩它,展示你的方式want@AnandG好的,谢谢你的帮助,现在我只在函数:)中加入一些ìf',但我不确定如何将k,m,g放在值旁边,它是自动生成的吗?你可以将它连接到值。