时间戳

首页 > 解决方案 > amcharts4 在对数值轴上处理零值的正确方法

javascript - amcharts4 在对数值轴上处理零值的正确方法

问题描述

我想在amcharts4中显示一些种类繁多的数据，所以我喜欢在数值轴上使用对数刻度。不幸的是，数据包含一些零值，当然不能用对数刻度显示。

我试图在渲染图表之前将零值更改为 1，这会起作用，但现在这些值不再正确。

data.forEach(item => {
  for (const key in item) {
    if (item[key] === 0) {
      item[key] = 1;
    }
  }
});

有没有更好的方法来处理对数值轴的零值，我可以显示正确的数据？

这是一个代码笔，它显示了我当前的解决方案。

标签： javascriptamchartsamcharts4

解决方案

编辑

从 4.9.34 版开始，treatZeroAs正式支持。只需在值轴上将其设置为所需值，即可将零值重新映射为：

valueAxis.treatZeroAs = 0.1;

更新了代码笔。

不再需要以下解决方法，但您可能会发现值轴适配器片段有助于在使用treatZeroAs.

旧方法 - 4.9.34 之前

似乎没有直接等效于 v3 的treatZeroAs属性，它会自动处理这类事情。预处理数据是一个步骤，但您也可以将原始值复制到单独的对象属性中，并使用一系列工具提示适配器动态显示您的实际值：

data.forEach(item => {
  for (const key in item) {
    if (item[key] <= 0) {
      item[key+"_actual"] = item[key]; //copy the original value into a different property
      item[key] = 1;
    }
  }
});
// ...

//display actual data that was re-mapped if it exists
chart.series.each((series) => {
  series.adapter.add("tooltipText", (text, target) => {
    if (target.dataFields) {
      let valueField = target.dataFields.valueY;
      let tooltipData = target.tooltipDataItem;
      if (tooltipData.dataContext[valueField + "_actual"] !== undefined) { 
        return '{' + valueField + '_actual}';
      }
      else {
        return text;
      }
    }
    else {
      return text;
    }
  })
});

如果你想伪造一个零标签，你也可以使用适配器，因为在这种情况下你的最小值将是 1：

//fake the zero axis label
valueAxis.renderer.labels.template.adapter.add("text", (text) => {
  if (text === "1") {
    return "0"
  }
  else {
    return text;
  }
})

密码笔

推荐阅读