Добавьте сюжетные связи к промежуткам, определенным GapSize в Highcharts

Я пытаюсь добавить цвет фона к пробелам в данных, чтобы они были более заметными на больших интервалах, я знаю, что могу сделать это, добавив сюжетные связи с нужным мне цветом, проблема в том, что у меня нет начала и конца разрыва потому что он создается путем определения GapSize и GapUnit (нет дат с нулевыми данными, просто пробел в датах). Я попытался добавить сюжетные связи, рассчитав разницу между датами и сравнив ее с tickInterval, но пока безуспешно,

вот пример гэпов, заданных с помощью gapsize

 plotOptions: {
        series: {
            gapSize: 1
        }
    }

https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/stock/plotoptions/series-gapsize

Есть ли более простой способ сделать это?

спасибо

javascript highcharts

22.03.2022 12:03

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Highcharts внутренне добавляет нулевые точки для создания пробелов. Вы можете получить рассчитанные нулевые точки и на основе их значений создать графики.

Например:

let plotBands = [];
let allowChartUpdate = true;

(function(H) {
    H.wrap(H.seriesTypes.area.prototype, 'getGraphPath', function(proceed, points) {
        const xAxis = this.xAxis;
        plotBands = [];

        points.forEach((p, index) => {
            if (p.isNull) {
                plotBands.push({
                    from: points[index - 1] ? points[index-1].x : xAxis.min,
                    to: points[index + 1] ? points[index+1].x : xAxis.max,
                    color: 'red'
                });
            }
        });

        return proceed.apply(this, Array.prototype.slice.call(arguments, 1));
    });
}(Highcharts));

Highcharts.stockChart('container', {
    chart: {
        type: 'area',
        events: {
            render: function() {
                // prevent infinity loop
                if (allowChartUpdate) {
                    allowChartUpdate = false;
                    this.xAxis[0].update({plotBands});
                    allowChartUpdate = true;
                }
            }
        }
    },
    ...
});

Живая демонстрация:https://jsfiddle.net/BlackLabel/jz0n28om/

Ссылка на API:https://api.highcharts.com/highcharts/xAxis.plotBands

Документы:https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

спасибо, ppotaczek, на самом деле это решение с плагином для функции рендеринга. Немного сложно адаптироваться к тому, над чем я работаю, зная, что я хотел реализовать его с помощью .NET-обертки Highcharts, я буду посмотреть, если можно найти решение

— 24.03.2022 08:41

23.03.2022 11:54