Amcharts 4 轴范围答案

【问题标题】：Amchart 4 axis rangeAmcharts 4 轴范围
【发布时间】：2019-01-09 14:17:46
【问题描述】：

请帮助我。我希望轴范围在一段时间内重复，例如在此示例中，如果每个范围只有一个开始日期和结束日期，则轴范围只显示一次：

https://www.amcharts.com/demos/stacked-area/

但是如果每个轴范围有多个开始日期和结束日期怎么办？可以显示它们吗？例如：

1994-超速罚款增加
1995-引入摩托车费
1996- 超速罚款增加
1997-引入摩托车费
1998- 超速罚款增加

此代码无效。我有 2 个轴范围测试 a 和测试 b。

function createRange(axis, from, to, title) {
  var range = axis.axisRanges.create();
  range.value = from;
  range.endValue = to;
  range.grid.stroke = chart.colors.getIndex(7);
  range.grid.strokeOpacity = 0.6;
  range.grid.strokeDasharray = "5,2";
  range.label.text =  title;
  range.label.inside = true;
  range.label.rotation = 90;
  range.label.horizontalCenter = "right";
  range.label.verticalCenter = "middle";
}

createRange(dateAxis, new Date(Date.parse(testa_start)), new Date(Date.parse(testa_end)), "Test A");
createRange(dateAxis, new Date(Date.parse(testb_start)), new Date(Date.parse(testb_end)), "Test B");

请帮忙。非常感谢。谢谢

【问题讨论】：

标签： javascript amcharts

【解决方案1】：

您应该设置range.date 而不是range.value。

查看具有固定功能的完整工作code pen。

function createRange(axis, from, to, title) {
    var range = axis.axisRanges.create();
    range.date = from;
    range.endValue = to;
    range.grid.stroke = chart.colors.getIndex(7);
    range.grid.strokeOpacity = 0.6;
    range.grid.strokeDasharray = "5,2";
    range.axisFill.fill = chart.colors.getIndex(7);
    range.axisFill.fillOpacity = 0.2;
    range.label.text =  title;
    range.label.inside = true;
    range.label.rotation = 90;
    range.label.horizontalCenter = "right";
    range.label.verticalCenter = "middle";
}

createRange(dateAxis, new Date(2005, 1, 1), new Date(2007, 1, 1), 'Test');

【讨论】：