javascript - 不知道如何实现 amcharts 的范围

Question

我正在使用 amcharts 插件来创建漂亮的图表。我发现了一些可以添加范围的东西，但图表代码的结构与我的不同，我似乎无法找到如何用我的代码实现它。这是我设置图表的方法。

var chartConfig = {
  "type": "serial",
  "theme": "none",
  "marginLeft": 70,
  "dataDateFormat": "YYYY-MM-DD",
  "graphs": [{
    "bullet": "round",
    "bulletBorderAlpha": 1,
    "bulletColor": "#FFFFFF",
    "bulletSize": 5,
    "hideBulletsCount": 50,
    "lineThickness": 2,
    "title": "red line",
    "useLineColorForBulletBorder": true,
    "valueField": "value"
  }],
  "chartCursor": {
    "categoryBalloonEnabled": false
  },
  "categoryField": "date",
  "categoryAxis": {
    "parseDates": true,
    "dashLength": 1,
    "minorGridEnabled": true,
    "labelsEnabled": false,
    "tickLength": 0
  },
  "valueAxes": [{
    "ignoreAxisWidth": true
  }],

var charts = [];
charts.push(AmCharts.makeChart("chartdiv", chartConfig));
charts.push(AmCharts.makeChart("chartdiv2", chartConfig2));
charts.push(AmCharts.makeChart("chartdiv3", chartConfig3));

for (var x in charts) {
  charts[x].addListener("zoomed", syncZoom);
  charts[x].addListener("init", addCursorListeners);
}

function addCursorListeners(event) {
  event.chart.chartCursor.addListener("changed", handleCursorChange);
  event.chart.chartCursor.addListener("onHideCursor", handleHideCursor);
}

function syncZoom(event) {
  for (x in charts) {
    if (charts[x].ignoreZoom) {
      charts[x].ignoreZoom = false;
    }
    if (event.chart != charts[x]) {
      charts[x].ignoreZoom = true;
      charts[x].zoomToDates(event.startDate, event.endDate);
    }
  }
}

function handleCursorChange(event) {
  for (var x in charts) {
    if (event.chart != charts[x]) {
      charts[x].chartCursor.syncWithCursor(event.chart.chartCursor);
    }
  }
}

function handleHideCursor() {
  for (var x in charts) {
    if (charts[x].chartCursor.hideCursor) {
      charts[x].chartCursor.forceShow = false;
      charts[x].chartCursor.hideCursor(false);
    }
  }
}

有人知道如何在我的案例中实现该范围吗？提前致谢!

Answer 1

由于您使用的是 v3，我假设您指的是 guides 。 Axis ranges是可以完成相同任务的 v4 功能。

可以通过指定起点/终点、填充、线条颜色和可选文本来将引用线添加到图表对象中。如果您要在类别轴上绘制引用线，请使用 date/toDate 或 category/toCategory。如果您要在值轴上绘制引用线，请使用 value/toValue:

guides: [{
  //date-based category axis guide
  date: "2019-02-20", 
  toDate: "2019-02-22",
  fillAlpha: .20,
  fillColor: "#ee7d01",
  label: "Category Axis guide",
  inside: true //move label inside instead of displaying it on the axis
}, {
  //value axis guide
  value: 10,
  toValue: 30,
  fillAlpha: .20,
  fillColor: "#10d7ee",
  label: "Value Axis guide",
  inside: false //keep label outside along the axis
}]

Codepen