禁用标签时 Amchart 组合图表标签重叠

Question

我这里有来自 amchart 的 codepen 的组合图表：https://codepen.io/amcharts/pen/68f79624039495969a04c80b86a90272

"valueAxes": [{
    "id": "v1",
    "unit": "%",
    "position": "right",
    "title": "GDP growth rate",
  }, {
    "id": "v2",
    "unit": "$",
    "unitPosition": "left",
    "position": "left",
    "title": "Sales volume (M)"
  }],

我想把所有的标签都放在右边，所以我做这个例子如下： https://jsfiddle.net/hansyulian/ymb2vcsa/

 "valueAxes": [{
    "id": "v1",
    "unit": "%",
    "position": "right",
    "title": "GDP growth rate",
  }, {
    "id": "v2",
    "unit": "$",
    "unitPosition": "left",
    "position": "right",
    "title": "Sales volume (M)"
  }],

我注意到标签重叠了，可以通过在标签中添加一些 "offset" 来解决，如下所示： https://jsfiddle.net/hansyulian/ymb2vcsa/2/

"valueAxes": [{
    "id": "v1",
    "unit": "%",
    "position": "right",
    "title": "GDP growth rate",
  }, {
    "id": "v2",
    "unit": "$",
    "unitPosition": "left",
    "position": "right",
    "offset": 70,
    "title": "Sales volume (M)"
  }],

然后我尝试使用 "labelsEnabled" 禁用标签：false 如下： https://jsfiddle.net/hansyulian/ymb2vcsa/3/

  "valueAxes": [{
    "id": "v1",
    "unit": "%",
    "position": "right",
    "labelsEnabled": false,// comment this and the label no longer overlapped
    "title": "GDP growth rate",
  }, {
    "id": "v2",
    "unit": "$",
    "unitPosition": "left",
    "position": "right",
    "labelsEnabled": false, // comment this and the title no longer overlapped
    "offset": 70, // this offset not working if labelsEnabled = false
    "title": "Sales volume (M)"
  }],

结果是 y 轴标题重叠，因为 "offset" 被禁用。有什么办法可以解决这个问题吗？

Answer 1

您可以将 labelsEnabled 设置为 true，并将 addClassNames 也设置为 true。

然后使用CSS隐藏标签：

.value-axis-v2 .amcharts-axis-label {
    visibility: hidden;
}

在此处检查示例：https://jsfiddle.net/ymb2vcsa/7/

Answer 2

好吧，显然我的一位同事给了我答案，但他拒绝在这里回答（归功于 TCY），就在我们向 AmCharts 提出支持票之前。显然有一个简单的 hack 使用 fontSize : 0 我们可以隐藏标签的文本如下：

https://jsfiddle.net/hansyulian/ymb2vcsa/8/

"valueAxes": [{
    "id": "v1",
    "unit": "%",
    "position": "right",
    "labelsEnabled": true, // comment this and the label no longer overlapped
    "title": "GDP growth rate",
    "fontSize": 0
  }, {
    "id": "v2",
    "unit": "$",
    "unitPosition": "left",
    "position": "right",
    "labelsEnabled": true, // comment this and the title no longer overlapped
    "offset": 70, // this offset not working if labelsEnabled = false
    "title": "Sales volume (M)",
    "fontSize": 0
  }],

这使得图表更有意义，同时我们可以在图表中应用图例，以便人们能够看到每种图表类型中代表的列是什么

禁用标签时 Amchart 组合图表标签重叠

Amchart combination chart label overlapped when labels disabled

javascript

css

amcharts