amcharts中的指南：如何在amcharts中使用磁带使用前缀：1024 vs 1000

Question

我正在尝试在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; 3亿; 390,625k; 500 000 000作为图表的指南，而不是更符合逻辑的100M 200M 300M 400M 500M。

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

Answer 1

不幸的是，唯一的方法是自己格式化，因为前缀只支持10的倍数，你已经注意到了。

对于轴标签和气球，您可以使用labelFunction作为值轴，使用balloonFunction来应用您自己的格式。对于指南，您必须在创建标签之前格式化这些标签。

在AmCharts的知识库中有一个演示，它可以在这里使用balloonFunction和labelFunction来处理大部分内容：https://www.amcharts.com/kbase/format-value-axis-and-balloon-numbers-as-file-sizes/您可以采用格式化方法并将其应用于指南标签。

嵌入式版本的知识库演示如下：

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>