how to see labels without losing middle text in doughnut chart

问题

I am trying to build a doughnut chart with Chart.js and added a text in the middle blank area. Unfortunately, when I drag my mouse over the graph, the text disappears. I found that, if I make the showTooltips: false in the options part, the text would become permanent, but I lose the labels this time.

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

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

Thank you :)

回答1:

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

Just extend the doughnut chart to (always) draw your middle text after the chart draw is complete. Something like

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.

A cursory (titles only :-)) glance of the GitHub issue list (https://github.com/nnnick/Chart.js/issues?utf8=%E2%9C%93&q=milestone%3Av2.0+) does not show anything specific to Chrome or Opera.

If there is something specific you want to try out, you can always fiddle your code into the latest (awesomely customizable) version (you have to make a few changes though)

Here is a fiddle to get you started - http://jsfiddle.net/beehe4eg/

That said, the current v2.0.0 (alpha 3) is a pre-release version (see https://github.com/nnnick/Chart.js/releases), so you probably don't want to switch your production code to this right now.

来源：https://stackoverflow.com/questions/31209512/how-to-see-labels-without-losing-middle-text-in-doughnut-chart

标签

text

label

chart.js