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

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

amcharts4 proper way to handle zero values on logarithmic value axis

javascript

amcharts

amcharts4