什么是amcharts 3向导等效于amcharts 4

时间:2018-12-04 14:29:31

标签: javascript amcharts

在amcharts 3中有categoryAxis.guides。但是我无法在amcharts 4中找到它。下面是我可以在amcharts 3中使用的guides数组。

var guidesArr = [{
    "category": "2016-Q1",
    "toCategory": "2016-Q4",
    "lineAlpha": 0.5,
    "tickLength": 30,
    "expand": true,
    "label": "2016"
}, {
    "category": "2017-Q1",
    "toCategory": "2017-Q4",
    "lineAlpha": 0.5,
    "tickLength": 30,
    "expand": true,
    "label": "2017"
}, {
    "category": "2018-Q1",
    "toCategory": "2018-Q4",
    "lineAlpha": 0.5,
    "tickLength": 30,
    "expand": true,
    "label": "2018"
}];

enter image description here

jsfiddle

1 个答案:

答案 0 :(得分:4)

Axis Ranges是v4中的指南的等效功能。您需要在图表底部添加一些填充,但是您可以使用旧的指南数组来重现v3指南,如下所示:

guidesArr.forEach(function(guide) {
  var range = categoryAxis.axisRanges.create();
  range.category = guide.category;
  range.endCategory = guide.toCategory;
  range.strokeOpacity = guide.lineAlpha;
  range.tick.location = 1;
  range.tick.length = guide.tickLength;
  range.tick.strokeWidth = 1;
  range.tick.strokeOpacity = guide.lineAlpha;
  range.label.dy = guide.tickLength;
  range.label.text = guide.label;
  range.label.horizontalCenter = "right";
  range.label.rotation = -45;
});

Demo