amcharts中的指南:如何在amcharts中使用前缀来表示磁盘使用情况:1024与1000

彼德

我正在尝试绘制amcharts中的磁盘空间使用情况。我的输入数据为原始格式:字节。

我希望amcharts动态显示k / M / G / T / P前缀,并在这些边界之一上绘制参考线,即,如果值在兆字节范围内,请显示1M 2M 3M等作为参考线。

为此,我在valueAxe上使用选项“ usePrefixes”使amcharts使用前缀。使用此选项时,前缀是基于1000的,而不是磁盘存储所需的基于1024的前缀。

我试过将prefixesOfBigNumbers更改为

[{"number":Math.pow(1024,1),"prefix":"k"},  
{"number":Math.pow(1024,2),"prefix":"M"},  
{"number":Math.pow(1024,3),"prefix":"G"},  
{"number":Math.pow(1024,4),"prefix":"T"},  
{"number":Math.pow(1024,5),"prefix":"P"},  
{"number":Math.pow(1024,6),"prefix":"E"}],  

但这无法正常工作:例如:给定的数据介于0到450兆字节之间,amcharts将使用100,000,000;195,312.5k; 300,000,000; 390,625k; 将500000000作为图表的指导,而不是更合乎逻辑的100M 200M 300M 400M 500M。

如何使amcharts指南系统使用基于1024的指南?

Xorspark

不幸的是,这样做的唯一方法是自己格式化它们,因为您注意到前缀仅支持10的倍数。

对于轴标签和气球,您可以将labelFunction用作值轴,并balloonFunction应用自己的格式。对于指南,您必须先格式化这些标签,然后再创建它们。

AmCharts知识库中有一个演示,可通过此处的balloonFunction和labelFunction进行大部分操作:https ://www.amcharts.com/kbase/format-value-axis-and-balloon-numbers-as-file -sizes /您可以采用format方法并将其应用于您的指南标签。

下面是知识库演示的嵌入式版本:

var chartData = generateChartData();
var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "marginRight": 80,
  "autoMarginOffset": 20,
  "marginTop": 7,
  "dataProvider": chartData,
  "valueAxes": [{
    "axisAlpha": 0.2,
    "dashLength": 1,
    "position": "left",
    "labelFunction": function(value) {
      return formatFileSize(value);
    }
  }],
  "mouseWheelZoomEnabled": true,
  "graphs": [{
    "id": "g1",
    "balloonFunction": function(item) {
      return "File size: <b>" + formatFileSize(item.values.value) + "</b>";
    },
    "bullet": "round",
    "bulletBorderAlpha": 1,
    "bulletColor": "#FFFFFF",
    "hideBulletsCount": 50,
    "title": "red line",
    "valueField": "size",
    "useLineColorForBulletBorder": true
  }],
  "chartScrollbar": {
    "autoGridCount": true,
    "graph": "g1",
    "scrollbarHeight": 40
  },
  "chartCursor": {

  },
  "categoryField": "date",
  "categoryAxis": {
    "parseDates": true,
    "axisColor": "#DADADA",
    "dashLength": 1,
    "minorGridEnabled": true
  }
});

// generate some random data, quite different range
function generateChartData() {
  var chartData = [];
  var firstDate = new Date();
  firstDate.setDate(firstDate.getDate() - 30);

  for (var i = 0; i < 30; i++) {
    var newDate = new Date(firstDate);
    newDate.setDate(newDate.getDate() + i);

    var size = Math.round(Math.random() * (500000 + i * 50000));

    chartData.push({
      date: newDate,
      size: size
    });
  }
  return chartData;
}

function formatFileSize(value) {
  if (value >= 1073741824)
    return (Math.round(value / 1073741824 * 100) / 100) + "TB";
  else if (value >= 1048576)
    return (Math.round(value / 1048576 * 100) / 100) + "MB";
  else if (value >= 1024)
    return Math.round(value / 1024) + "KB";
  else
    return value + "B";
}
#chartdiv {
  width: 100%;
  height: 300px;
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何检查ftp中的磁盘使用情况?

来自分类Dev

如何了解Windows 10中的磁盘使用情况?

来自分类Dev

如何在Unix中查找目录的磁盘使用情况

来自分类Dev

如何在不使用Azure门户的情况下获取DocumentDB磁盘使用情况

来自分类Dev

如何在不使用Azure门户的情况下获取DocumentDB磁盘使用情况

来自分类Dev

如何按文件类型显示磁盘使用情况?

来自分类Dev

如何随时间跟踪程序的磁盘使用情况?

来自分类Dev

如何找出实际的磁盘使用情况?

来自分类Dev

如何在ASP.NET中监视计算机的cpu,内存和磁盘使用情况?

来自分类Dev

在Powershell中输出磁盘使用情况

来自分类Dev

在Java中获取文件的实际磁盘使用情况

来自分类Dev

在 Nautilus/Thunar 中显示磁盘使用情况

来自分类Dev

PostgreSQL:列磁盘使用情况

来自分类Dev

符号链接的磁盘使用情况

来自分类Dev

磁盘使用情况分析

来自分类Dev

显示磁盘使用情况

来自分类Dev

磁盘使用情况很奇怪

来自分类Dev

如何使用C程序在Linux中获取磁盘使用情况?

来自分类Dev

如何在命令行Linux中分析磁盘使用情况?

来自分类Dev

bash脚本,显示cpu使用情况,磁盘使用情况,ram使用情况

来自分类Dev

如何在Mac上跟踪资源使用情况?

来自分类Dev

如何在AWS上为ubuntu实例设置磁盘空间使用情况的电子邮件警报?

来自分类Dev

如何监视网络中的Internet使用情况?

来自分类Dev

如何显示Netbeans中的内存使用情况?

来自分类Dev

如何在Android应用中删除/丢弃“免费” RAM使用情况

来自分类Dev

如何在Windows Server 2008中监视CPU和内存使用情况

来自分类Dev

如何在Java中查看此GC的总内存使用情况

来自分类Dev

如何在Linux或R中检查CPU核心使用情况

来自分类Dev

如何在hadoop纱线中获取容器cpu /内存使用情况

Related 相关文章

  1. 1

    如何检查ftp中的磁盘使用情况?

  2. 2

    如何了解Windows 10中的磁盘使用情况?

  3. 3

    如何在Unix中查找目录的磁盘使用情况

  4. 4

    如何在不使用Azure门户的情况下获取DocumentDB磁盘使用情况

  5. 5

    如何在不使用Azure门户的情况下获取DocumentDB磁盘使用情况

  6. 6

    如何按文件类型显示磁盘使用情况?

  7. 7

    如何随时间跟踪程序的磁盘使用情况?

  8. 8

    如何找出实际的磁盘使用情况?

  9. 9

    如何在ASP.NET中监视计算机的cpu,内存和磁盘使用情况?

  10. 10

    在Powershell中输出磁盘使用情况

  11. 11

    在Java中获取文件的实际磁盘使用情况

  12. 12

    在 Nautilus/Thunar 中显示磁盘使用情况

  13. 13

    PostgreSQL:列磁盘使用情况

  14. 14

    符号链接的磁盘使用情况

  15. 15

    磁盘使用情况分析

  16. 16

    显示磁盘使用情况

  17. 17

    磁盘使用情况很奇怪

  18. 18

    如何使用C程序在Linux中获取磁盘使用情况?

  19. 19

    如何在命令行Linux中分析磁盘使用情况?

  20. 20

    bash脚本,显示cpu使用情况,磁盘使用情况,ram使用情况

  21. 21

    如何在Mac上跟踪资源使用情况?

  22. 22

    如何在AWS上为ubuntu实例设置磁盘空间使用情况的电子邮件警报?

  23. 23

    如何监视网络中的Internet使用情况?

  24. 24

    如何显示Netbeans中的内存使用情况?

  25. 25

    如何在Android应用中删除/丢弃“免费” RAM使用情况

  26. 26

    如何在Windows Server 2008中监视CPU和内存使用情况

  27. 27

    如何在Java中查看此GC的总内存使用情况

  28. 28

    如何在Linux或R中检查CPU核心使用情况

  29. 29

    如何在hadoop纱线中获取容器cpu /内存使用情况

热门标签

归档