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

Question

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

我尝试在渲染图表之前将零值更改为 1，这可行，但现在这些值不再正确。

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

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

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

Answer 1

编辑

自版本 4.9.34 起，treatZeroAs得到官方支持。只需将其在值轴上设置为所需的值即可将零值重新映射到:

valueAxis.treatZeroAs = 0.1;

Updated codepen .

不再需要以下解决方法，但您可能会发现值轴适配器片段有助于在使用 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;
  }
})

Codepen