3

我已经使用了 chart.js 1.0.2，但不知道版本 2+ 已经到来。现在我需要仅在 2+ 中可用的功能同时我已经为 chart.js 1.0.2 编写了几个扩展，我想将其转换为 2+ 版本。

Chart.types.Doughnut.extend(
  {
    name: "DoughnutWithText",

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

      width = this.chart.width,
      height = this.chart.height;

      var fontSize = (height / this.options.textScale).toFixed(2);
      this.chart.ctx.font = fontSize + "em Lato";
      this.chart.ctx.textBaseline = "middle";
      this.chart.ctx.fillStyle="#000";

      textX = Math.round((width - this.chart.ctx.measureText(this.options.doughnutText).width) / 2),
      textY = height / 2;
      this.chart.ctx.fillText(this.options.doughnutText, textX, textY);
    }
  });

如何在版本 2+ 中执行此操作？

https://jsfiddle.net/64106xh8/1/

4

1 回答 1

5

使用 2.1.x，您可以编写一个插件来执行此操作

预习

在此处输入图像描述

脚本

Chart.pluginService.register({
    afterDraw: function (chart) {
        if (chart.config.options.elements.center) {
            var helpers = Chart.helpers;
            var centerX = (chart.chartArea.left + chart.chartArea.right) / 2;
            var centerY = (chart.chartArea.top + chart.chartArea.bottom) / 2;

            var ctx = chart.chart.ctx;
            ctx.save();
            var fontSize = helpers.getValueOrDefault(chart.config.options.elements.center.fontSize, Chart.defaults.global.defaultFontSize);
            var fontStyle = helpers.getValueOrDefault(chart.config.options.elements.center.fontStyle, Chart.defaults.global.defaultFontStyle);
            var fontFamily = helpers.getValueOrDefault(chart.config.options.elements.center.fontFamily, Chart.defaults.global.defaultFontFamily);
            var font = helpers.fontString(fontSize, fontStyle, fontFamily);
            ctx.font = font;
            ctx.fillStyle = helpers.getValueOrDefault(chart.config.options.elements.center.fontColor, Chart.defaults.global.defaultFontColor);
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText(chart.config.options.elements.center.text, centerX, centerY);
            ctx.restore();
        }
    },
})

接着

    ...
    options: {
        elements: {
            center: {
                text: 'Hello',
                fontColor: '#000',
                fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
                fontSize: 24,
                fontStyle: 'normal'
            }
        }
    }
};

小提琴 - http://jsfiddle.net/a1r1kszb/

于 2016-05-18T14:27:45.763 回答