Highcharts область заполнить верх

Question

Я искал документацию по старшим диаграммам и несколько поисковых систем, чтобы найти решение для моей проблемы, но не нашел подходящего решения.

Я хочу создать диаграмму с сериями областей, которая заполняет ее fillColor доверхняя часть графика.Это выглядело бы как если бы вы меняли зависимые yAxes, но не меняли значения.Я не хочу использовать тип серии rangerange, потому что в таблице необработанных данных и при экспорте я не показываю значения «low» и «high».Я просто хочу использовать значение у.

Есть ли способ сделать это простым способом.Может быть, есть опция в старших чартах, которую я упустил.

Answer 1

Вы можете добавить rect, который будет иметь размеры всей области графика, и добавить анимацию.Чтобы нарисовать элемент, просто нужно вызвать Chart.renderer.rect() на обработчике chart.events.load.Весь процесс будет выглядеть следующим образом:

Создать новый элемент для события load, установить его атрибуты цвета и непрозрачности равными атрибутам по умолчанию, а затем добавить анимацию:

chart: {
    type: 'area',
    events: {
        load() {
            var rect = this.renderer.rect(this.plotLeft, this.plotTop, 0, this.plotHeight)
              .attr({
                  fill: Highcharts.getOptions().colors[0],
                  opacity: 0.8
              })
              .add()
            rect.animate({
                width: this.plotWidth
            }, {
                duration: 1000
            })
        }
    }
},

Затем установитьсерия fillColor равна белому (или другому цвету области графика):

series: [{
        name: 'USA',
        fillColor: 'rgba(255,255,255,1)',
        data: [
            ... some data ...
        ]
}]

Живой пример: https://jsfiddle.net/up8f5x34/

APIСправка:

https://api.highcharts.com/highcharts/chart.events.load

https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#rect

https://api.highcharts.com/highcharts/series.area.fillColor