Question

我想用两个值创建一个圆环图。单击图形应在中心打印值。我在stackoverflow中找到了与我的要求类似的解决方案。我想使用github中最新的Chart.js库。最新的Chart.js中是否提供此功能？

Answer 1

在Chart.js v2.x中可以做到这样的事情

我认为最好的方法是使用插件。事实上，Cmyker awnser对您链接的问题甚至更新了他的帖子，以说明这在Charts.js v2.x中是如何工作的

看他的小提琴：https://jsfiddle.net/cmyker/ooxdL2vj/

和相应的插件定义：

Chart.pluginService.register({
  beforeDraw: function(chart) {
    var width = chart.chart.width,
        height = chart.chart.height,
        ctx = chart.chart.ctx;

    ctx.restore();
    var fontSize = (height / 114).toFixed(2);
    ctx.font = fontSize + "em sans-serif";
    ctx.textBaseline = "middle";

    var text = "75%",
        textX = Math.round((width - ctx.measureText(text).width) / 2),
        textY = height / 2;

    ctx.fillText(text, textX, textY);
    ctx.save();
  }
});

Answer 2

您还可以在配置中添加参数，并将其用作文本：

    "options": {
        title: {
            display: true,
            position: "bottom",
            text: 'Upcoming Meetings'
        },
        legend: {
            display: false
        },
        centertext: "123"
    }

javascript看起来与此类似（请注意：甜甜圈有一个标题，但没有传说，定位中心文本是以某种方式进行试验）：

    <script>
        Chart.pluginService.register({
            beforeDraw: function (chart) {
                if (chart.options.centertext) {
                    var width = chart.chart.width,
                            height = chart.chart.height,
                            ctx = chart.chart.ctx;

                    ctx.restore();
                    var fontSize = (height / 80).toFixed(2); // was: 114
                    ctx.font = fontSize + "em sans-serif";
                    ctx.textBaseline = "middle";

                    var text = chart.options.centertext, // "75%",
                            textX = Math.round((width - ctx.measureText(text).width) / 2),
                            textY = height / 2 - (chart.titleBlock.height - 15);

                    ctx.fillText(text, textX, textY);
                    ctx.save();
                }
            }
        });
    </script>

Answer 3

大卫的回答非常好。谢谢。我想补充说，文本并没有真正集中，因为它没有考虑图例高度。

var path = require("path")
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')

module.exports = {
    context: __dirname,

    entry: [
        'webpack-dev-server/client?http://localhost:3000',
        'webpack/hot/only-dev-server',
        './assets/js/index', // entry point of our app. assets/js/index.js should require other js modules and dependencies it needs
    ],

    output: {
        path: path.resolve('./assets/bundles/'),
        filename: "[name]-[hash].js",
        publicPath: 'http://localhost:3000/assets/bundles/', // Tell django to use this URL to load packages and not use STATIC_URL + bundle_name
    },

    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin(), // don't reload if there is an error
        new BundleTracker({filename: './webpack-stats.json'}),
    ],

    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loaders: ['react-hot-loader', 'babel-loader?presets[]=react'],
            }, // to transform JSX into JS
        ],
    },

    resolve: {
        modules: ['node_modules', 'bower_components'],
        extensions: ['.js', '.jsx']
    },
}

添加这些将解决这个问题。

Answer 4

这是最新版本的 ChartJs (07/23/2021)

我自定义了插件以使其工作 - 我无法仅通过复制和粘贴来使其工作。当我开始工作时，除以 1.87。

let textY = height / 2 -> let textY = height / 1.87

const centerDoughnutPlugin = {
    id: "annotateDoughnutCenter",
    beforeDraw: (chart) => {
      let width = chart.width;
      let height = chart.height;
      let ctx = chart.ctx;

      ctx.restore();
      let fontSize = (height / 114).toFixed(2);
      ctx.font = fontSize + "em sans-serif";
      ctx.textBaseline = "middle";

      let text = "75%";
      let textX = Math.round((width - ctx.measureText(text).width) / 2);
      let textY = height / 1.87;

      console.log("text x: ", textX);
      console.log("text y: ", textY);

      ctx.fillText(text, textX, textY);
      ctx.save();
    },
  };

  // Register Donut Plugin
  Chart.register(centerDoughnutPlugin);

如何使用Chart.js在圆环图的中心添加文本？

4 个答案:

如何使用Chart.js在圆环图的中心添加文本？​​

4 个答案:

如何使用Chart.js在圆环图的中心添加文本？