Граница кривой Highcharts внутри - PullRequest
Новая
       12

Граница кривой Highcharts внутри

0 голосов
/ 03 июля 2019

Я пытаюсь заставить верхнюю границу хай-чартов изгибаться внутрь как таковую enter image description here

на колонке / цилиндре, как показано ниже. Я пытался поиграть с 

borderRadius

в css, но у меня ничего не получалось, закрытие, которое я получил, было что-то вроде этого, но это не вариант enter image description here

jsfiddle здесь для cyllinder

https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/cylinder/

и здесь для столбца. Оба хороши для моего случая использования. https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/column-borderradius/

1 Ответ

1 голос
/ 04 июля 2019

Это невозможно при использовании defualt Highcharts API, но есть возможность добавить расширение, обернув функции-прототипы.Вы можете заключить метод drawPoints, чтобы изменить тип формы столбца с rect на path с изогнутой верхней границей. 

(function(H) {
    H.wrap(H.seriesTypes.column.prototype, 'drawPoints', function(proceed) {
        this.points.forEach(function(point) {
            var sArgs = point.shapeArgs;
            point.shapeType = 'path';
            point.shapeArgs = {
                'd': [
                    'M', sArgs.x, sArgs.y,
                    'Q', sArgs.x + sArgs.width / 2,
                    sArgs.y + sArgs.width / 2,
                    sArgs.x + sArgs.width, sArgs.y,
                    'L', sArgs.x + sArgs.width, sArgs.y + sArgs.height,
                    sArgs.x, sArgs.y + sArgs.height, 'z'
                ]
            }
        });

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

Демонстрационная версия: http://jsfiddle.net/BlackLabel/as6y1uhn/

Справочник по API: https://api.highcharts.com/class-reference/Highcharts#.wrap

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

...