使用chartjs的垂直洗涤器线

Question

使用chart.js v2将鼠标悬停在折线图上时，有没有办法获得垂直洗涤线？与使用此人力车示例显示垂直线的方式类似：http://code.shutterstock.com/rickshaw/examples/formatter.html

我可以在线上的实际点上使用工具提示，但是当用户将鼠标悬停在图表上并从左向右擦洗时，它可以显示垂直线

Answer 1

您可以扩展Chart.js来执行此操作。只需在初始化图表后覆盖showTooltip方法。

预览

<强>脚本

Chart.types.Line.extend({
    name: "LineAlt",
    initialize: function () {
        Chart.types.Line.prototype.initialize.apply(this, arguments);

        var originalShowTooltip = this.showTooltip;
        this.showTooltip = function (activePoints) {

            if (activePoints.length) {
                var ctx = this.chart.ctx;
                var scale = this.scale;
                ctx.save();
                ctx.strokeStyle = '#aaa';
                ctx.beginPath();
                ctx.moveTo(activePoints[0].x, scale.startPoint);
                ctx.lineTo(activePoints[0].x, scale.endPoint);
                ctx.stroke();
                ctx.restore();
            }

            return originalShowTooltip.apply(this, arguments);
        }
    }
});

然后

new Chart(ctx).LineAlt(data);

小提琴 - http://jsfiddle.net/98gz1fhw/