不知道如何实现范围到结构图

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 。轴范围是可以完成同一操作的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