amcharts 上的水平线和填充答案

【问题标题】：Horizontal lines and fills on amchartsamcharts 上的水平线和填充
【发布时间】：2018-04-26 18:27:31
【问题描述】：

我有一张图表，其中 x 轴上有日期，y 轴上有数字 -15 到 15。

我需要在 -3 处有一条水平线，并用黄色填充 0 到 -3 的空间。我在 amcharts 上找到的唯一与此相关的文档是 this one，这对我来说信息太少了。

代码

var char = {
    type: 'xy',
    theme: 'light',

    titles: [{
        text: 'Blind PUL-QC Performance'
    }, {
        text: 'Difference: \'Blind PUL-QC(%)\' - \'Original PUL-QC(%)\'',
        bold: false
    }],

    dataProvider: als.webview.qc.reports.pullqccheck.chartDataOrig,
    valueAxes: axes2,
    graphs: graphs2,
    dataDateFormat: "DD-MM-YYYY",


        guides: [ {
            fillAlpha: 0.10,
            value: 0,
            toValue: -3,
            lineColor: "#CC0000",
            lineAlpha: 2,
            fillAlpha: 0.2,
            fillColor: "#CC0000",
            inside: true

    } ]

};

图表右侧出现一条模糊的垂直线，这不是我需要的。

【问题讨论】：

标签： javascript graph line amcharts

【解决方案1】：

虽然它没有将其显示为代码示例，但链接文档确实提到您可以将指南放在valueAxis 中。一个快速的解决方法是将您的guides 移动到 Y 值轴而不是图表配置的顶层以获得所需的结果，否则如果您将指南放置在对象的顶层。

valueAxes: [{
  position: "left",
  guides: [{
    fillAlpha: 0.10,
    value: 0,
    toValue: -3,
    lineColor: "#CC0000",
    lineAlpha: 2,
    fillAlpha: 0.2,
    fillColor: "#CC0000",
    inside: true
  }]
}, {
  // ... X axis def omitted
}]

如果您知道 valueAxis 的 ID，另一种选择是在指南本身中指定 valueAxis id：

AmCharts.makeChart("...", {
  // ...
  valueAxes: [{
    id: "yaxis",
    position: "left",
    // ...
  }, {
    // ... x axis omitted
  }],
  guides: [{
    // ...
    valueAxis: "yaxis"
  }],
  // ...
});

Demo

【讨论】：