图表js条形图与v2.1.3中的弯曲边框

时间:2016-10-24 06:28:11

标签: javascript charts

我能够使用link绘制弯曲边框,但最终得到较低值screenshot的尴尬结果。有人可以帮助我使用初始化方法扩展图表并使用此图表绘制。 helpers.drawRoundedRectangle()与V.1中的相似。

Chart.types.Bar.extend({
name: "BarAlt",
initialize: function (data) {
    Chart.types.Bar.prototype.initialize.apply(this, arguments);

    if (this.options.curvature !== undefined && this.options.curvature <= 1) {
        var rectangleDraw = this.datasets[0].bars[0].draw;
        var self = this;
        var radius = this.datasets[0].bars[0].width * this.options.curvature * 0.5;

        // override the rectangle draw with ours
        this.datasets.forEach(function (dataset) {
            dataset.bars.forEach(function (bar) {
                bar.draw = function () {
                    // draw the original bar a little down (so that our curve brings it to its original position)
                    var y = bar.y;
                    // the min is required so animation does not start from below the axes
                    bar.y = Math.min(bar.y + radius, self.scale.endPoint - 1);
                    // adjust the bar radius depending on how much of a curve we can draw
                    var barRadius = (bar.y - y);
                    rectangleDraw.apply(bar, arguments);

                    // draw a rounded rectangle on top
                    Chart.helpers.drawRoundedRectangle(self.chart.ctx, bar.x - bar.width / 2, bar.y - barRadius + 1, bar.width, bar.height, barRadius);
                    ctx.fill();

                    // restore the y value
                    bar.y = y;
                }
            })
        })
    }
}

});

0 个答案:

没有答案