Chart.js 堆叠柱状图添加flag

本文章是因为项目中之前遇到一个问题，需要在堆叠柱状图加上一个月份的flag，但是flag不能覆盖到柱状图。所以当时自己写了demo去查看相关的内容。

初始想法是参照官方文档扩展chart

但是效果不理想，如下：

当前花了三个flag，这不是我想要的。第二是当前的flag覆盖在柱状图的上面。原因是因为：对于堆叠柱状图的绘制是从最后一个dataset开始画的，也就是从紫色的柱状图开始绘画。

绘画的顺序是先画紫色柱状图，然后绘画紫色柱状图上方的flag，然后再继续画浅蓝色的柱状图，浅蓝色柱状图上方的flag，浅红色柱状图，浅红色柱状图上方的flag。这也是为什么三个flag都在柱状图上方的原因。

解决flag在柱状图上面绘制

var custom = Chart.controllers.bar.extend({
    draw: function(ease) {
        // Now we can do some custom drawing for this dataset. Here we'll draw a red box around the first point in each dataset
        var meta = this.getMeta();
        var pt0 = meta.data[0];
        var radius = pt0._view.radius || 15;
       
        var ctx = this.chart.chart.ctx;
        ctx.save();
        ctx.strokeStyle = 'red';
        ctx.lineWidth = 1;
        ctx.fillRect(pt0._view.x - radius, pt0._view.y - radius, 2 * radius, 2 * radius);
        ctx.restore();     


        // Call super method first
        Chart.controllers.bar.prototype.draw.call(this, ease);
    }
});

解决flag绘画三次

既然知道flag绘画三次的原因，那么我们只需要将flag只在最后一个dataset绘画就可以了。

var custom = Chart.controllers.bar.extend({
    draw: function(ease) {
        // Now we can do some custom drawing for this dataset. Here we'll draw a red box around the first point in each dataset
        var meta = this.getMeta();
        var pt0 = meta.data[0];
        var radius = pt0._view.radius || 15;
       
        //Draw the flag in the top of bar.
        if (pt0._model.datasetLabel == this.chart.data.datasets[this.chart.data.datasets.length - 1].label) {
            var ctx = this.chart.chart.ctx;
            ctx.save();
            ctx.strokeStyle = 'red';
            ctx.lineWidth = 1;
            ctx.fillRect(pt0._view.x - radius, pt0._view.y - radius, 2 * radius, 2 * radius);
            ctx.restore();
        }

        // Call super method first
        Chart.controllers.bar.prototype.draw.call(this, ease);
    }
});