如何在不丢失圆环图中中间文本的情况下查看标签

Question

我正在尝试使用 Chart.js 构建圆环图并在中间空白区域添加文本。不幸的是，当我将鼠标拖到图表上时，文本消失了。我发现，如果我在选项部分制作 showTooltips: false，文本将成为永久文本，但这次我丢失了 labels。

Q1:有谁知道如何在不丢失标签的情况下使文本永久化？

问题 2： ChartNew 是否与 Chrome 一起正常工作？我听说最新的 chrome 和 opera 版本有一些问题。

谢谢:)

Answer 1

Q1: Does anyone know how to make text permanent without losing the labels?

只需扩展圆环图即可（始终）在图表绘制完成后绘制中间文本。像

Chart.types.Doughnut.extend({
    name: "DoughnutAlt",
    draw: function(){
        Chart.types.Doughnut.prototype.draw.apply(this, arguments);

        this.chart.ctx.font = Chart.helpers.fontString(14, "normal", "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif");
        this.chart.ctx.fillStyle = "Black";
        this.chart.ctx.textAlign = "center";
        this.chart.ctx.textBaseline = "middle";        
        this.chart.ctx.fillText("Hello World!", this.chart.width / 2, this.chart.height / 2);
    }
});

Fiddle - http://jsfiddle.net/upbcbyfb/

Q2: Does ChartNew working fine with Chrome? I heard that there are some problems with the latest chrome and opera versions.

粗略地（只有标题 :-)）浏览 GitHub 问题列表 (https://github.com/nnnick/Chart.js/issues?utf8=%E2%9C%93&q=milestone%3Av2.0+) 并没有显示任何特定于 Chrome 或 Opera 的内容。

如果您想尝试一些特定的东西，您可以随时 fiddle 将您的代码转换为最新的（非常可定制的）版本（尽管您必须进行一些更改）

这里有一个 fiddle 可以帮助您入门 - http://jsfiddle.net/beehe4eg/

也就是说，当前的 v2.0.0（alpha 3）是 pre-release 版本（参见 https://github.com/nnnick/Chart.js/releases), 所以你现在可能不想将你的生产代码切换到这个。

如何在不丢失圆环图中中间文本的情况下查看标签

how to see labels without losing middle text in doughnut chart

text

label

chart.js