Highcharts的一手拉线

Question

你如何延伸Highcharts来完成一个＆＃34;手绘＆＃34;效果（例如：https://www.amcharts.com/demos/column-and-line-mix/?theme=chalk）。

或者可以使用库完成吗？

Answer 1

在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方法，可以对其进行包装/覆盖，以便返回复杂路径（手写效果）而不是简单{ {1}}标记。

关于包装/覆盖的文档： https://www.highcharts.com/docs/extending-highcharts/extending-highcharts