不知道如何实施射程

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