Highcharts 脆皮烤盘

在SVG中，当设置为“短点”或任何点时，网格线总是两个像素高，研究表明，可以通过

a） 变换（0.5,0.5）--将其移动半个像素，使绘图在一个像素内

或

b） 向元素添加style='shape-rendering:crispEdge'

请参见此处的演示：

这是Highcharts.js中的SVGElement原型

SVGElement.prototype = {    
    dashstyleSetter: function (value) {
        var i;
        value = value && value.toLowerCase();
        if (value) {
            value = value
                .replace('shortdashdotdot', '3,1,1,1,1,1,')
                .replace('shortdashdot', '3,1,1,1')
                .replace('shortdot', '1,1,')
                .replace('shortdash', '3,1,')
                .replace('longdash', '8,3,')
                .replace(/dot/g, '1,3,')
                .replace('dash', '4,3,')
                .replace(/,$/, '')
                .split(','); // ending comma

            i = value.length;
            while (i--) {
                value[i] = pInt(value[i]) * this['stroke-width'];
            }
            value = value.join(',')
                .replace('NaN', 'none'); // #3226
            this.element.setAttribute('stroke-dasharray', value);
        }
    }
}

如何将其更新为包含变换或“样式”（首选）

i、 e。 添加
this.element.setAttribute（'style'，'shape rendering:crispEdge'）

能否更新SVGElement原型（到目前为止失败）

海图演示：

---

查看点如何只是一条长灰线

可以在SVGElement的dashstyleSetter中扩展Highcharts并将形状渲染设置为CrispEdge（因为形状渲染是直接设置的属性，而不是样式-MDN:）

包装器：

(function (H) {
    H.wrap(H.SVGElement.prototype, 'dashstyleSetter', function (proceed) {
        // Run original proceed method
        proceed.apply(this, [].slice.call(arguments, 1));
        if(arguments[1]) {
            this.element.setAttribute('shape-rendering', 'crispEdges');
        }
    });
}(Highcharts));

JSFIDLE示例：

(function (H) {
    H.wrap(H.SVGElement.prototype, 'dashstyleSetter', function (proceed) {
        // Run original proceed method
        proceed.apply(this, [].slice.call(arguments, 1));
        if(arguments[1]) {
            this.element.setAttribute('shape-rendering', 'crispEdges');
        }
    });
}(Highcharts));