javascript - 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的指南？

最佳答案

不幸的是，这样做的唯一方法是自行格式化它们，因为您注意到前缀仅支持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>

关于javascript - amcharts中的指南:如何在amcharts中使用前缀来表示磁盘使用情况:1024与1000，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42162831/