Question

我正在使用chart.js来创建堆积条形图，同时我已成功移动并旋转xaxis标签以显示在条形图的顶部，当我使用鼠标移动条形图时，整个图表显得扭曲。

这是正常的这是鼠标结束后我得到的：

这是代码

这是我用来旋转xaxis标签：

https://jsfiddle.net/staverist/zhocr17t/96/

animation: {
                        duration: 1,
                        onComplete: function() {
                        var chartInstance = this.chart;
                            var ctx = chartInstance.ctx;
                            ctx.textAlign = "left";
                            ctx.font = "bold 10px Arial";
                            ctx.fillStyle = "black";                            
                            Chart.helpers.each(this.data.datasets.forEach(function (dataset, i) {
                                    var meta = chartInstance.controller.getDatasetMeta(i);
                                    Chart.helpers.each(meta.data.forEach(function (bar, index) {
                                            ctx.save();
                                            // Translate 0,0 to the point you want the text
                                            ctx.translate(bar._model.x, bar._model.y - 30);
                                        // Rotate context by -90 degrees
                                        ctx.rotate(-0.5 * Math.PI);
                                                    // Draw text
                              //ctx.fillText(value,0,0);
                               if(bar._datasetIndex==0){            
                               ctx.fillText(bar._model.label, 0, 0);
                                             ctx.restore();
                               }
                                    }),this)
                            }),this);
                    }

Answer 1

这是因为您在旋转后没有恢复画布状态。不要在if语句中恢复它，而应该将其恢复到外部，如下所示：

...
if (bar._datasetIndex == 0) {
   ctx.fillText(bar._model.label, 0, 0);
}
ctx.restore(); //<- restore canvas state
...

另外，您最好创建一个plugin（以防止标签闪烁），而不是在动画完成时绘制标签。

以下是working example on JSFiddle

工具提示混淆了Chart.js中的条形图

1 个答案: