Нарисованные от руки линии для Highcharts

Как бы вы расширили Highcharts, чтобы добиться эффекта "нарисованного от руки" (пример: https://www.amcharts.com/demos/column-and-line-mix/?theme=chalk ).

Или это можно сделать с помощью библиотеки?


charts highcharts angular2-highcharts
person ideaboxer    schedule 17.01.2018    source источник
comment
См. документацию по темам: highcharts.com/docs/chart-design- и стиль/темы   -  person wergeld    schedule 17.01.2018

Ответы (1)


arrow_upward
0
arrow_downward

Реализация этого в Highcharts требует некоторого анализа основного кода и переноса/перезаписи SVGRenderer методов.

Пример

Точки столбца — это формы SVG rect:

https://github.com/highcharts/highcharts/blob/master/js/parts/ColumnSeries.js

Функция translate:

        // Register shape type and arguments to be used in drawPoints
        point.shapeType = 'rect';

Функция drawPoints:

                point.graphic = graphic =
                    renderer[point.shapeType](shapeArgs)
                        .add(point.group || series.group);

SVGRenderer (https://github.com/highcharts/highcharts/blob/master/js/parts/SvgRenderer.js) содержит метод rect, который можно обернуть/перезаписать, чтобы он возвращал сложный путь (рукописный эффект) вместо простого тега rect.

Документы по переносу/перезаписи: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

person Kamil Kulig    schedule 18.01.2018