Горизонтальные линии и заливки на амхартах

Question

У меня есть диаграмма с датами на оси х и числами от -15 до 15 на оси у.

Мне нужно иметь горизонтальную линию на -3 и заполнить пространство от 0 до -3 желтым цветом. Единственный документ, который я мог найти на амбартах, относящихся к этому, был этот https://www.amcharts.com/kbase/vertical-or-horizontal-lines-or-fill-ranges/

что для меня слишком мало информации.

код

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

    } ]

};

Я получаю слабую вертикальную линию в правой части графика, что совсем не то, что мне нужно. Пожалуйста, помогите!

Answer 1

Несмотря на то, что он не показывает это как пример кода, в связанном документе упоминается, что вы можете поместить направляющие в значение Axis . Быстрое решение состоит в том, чтобы переместить guides в ось значений Y, а не в верхний уровень конфигурации диаграммы, чтобы получить желаемый результат, в противном случае диаграмма будет предполагать, что направляющая находится на оси X, если вы поместите ее в верхний уровень объекта.

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 в самом руководстве, если вы знаете значение идентификатора оси:

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

Демо