charts - Highcharts 的手绘线

Question

您将如何扩展Highcharts以实现“手绘”效果（例如：https ://www.amcharts.com/demos/column-and-line-mix/?theme=chalk ）。

或者可以使用库来完成吗？

Answer 1

在 Highcharts 中实现它需要一些核心代码分析和包装/覆盖SVGRenderer方法。

例子

列点是 SVGrect的形状：

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