在React中的图表js-2中的甜甜圈图中添加文本

小编典典

在React中的图表js-2中的甜甜圈图中添加文本

reactjs

我想在我的甜甜圈饼图中添加一条短信。更具体地说，我想要这样的事情

我在堆栈溢出中遇到了相同的问题，因为他们在jquery中使用图表js，并且由于我是javascript新手，所以我感到困惑。这就是我定义饼图的方式：

<Doughnut
            data={sectorsData}
            width={250}
            height={250}
            options={{
              legend: {
                display: false
              },
              maintainAspectRatio: false,
              responsive: true,
              cutoutPercentage: 60
            }}
          />

阅读 365

2020-07-22

共1个答案

小编典典

我的示例使用text数据上的属性指定内部文本：

const data = {
  labels: [...],
  datasets: [...],
  text: '23%'
};



import React from 'react';

import ReactDOM from 'react-dom';

import {Doughnut} from 'react-chartjs-2';



// some of this code is a variation on https://jsfiddle.net/cmyker/u6rr5moq/

var originalDoughnutDraw = Chart.controllers.doughnut.prototype.draw;

Chart.helpers.extend(Chart.controllers.doughnut.prototype, {

  draw: function() {

    originalDoughnutDraw.apply(this, arguments);



    var chart = this.chart.chart;

    var ctx = chart.ctx;

    var width = chart.width;

    var height = chart.height;



    var fontSize = (height / 114).toFixed(2);

    ctx.font = fontSize + "em Verdana";

    ctx.textBaseline = "middle";



    var text = chart.config.data.text,

        textX = Math.round((width - ctx.measureText(text).width) / 2),

        textY = height / 2;



    ctx.fillText(text, textX, textY);

  }

});



const data = {

    labels: [

        'Red',

        'Green',

        'Yellow'

    ],

    datasets: [{

        data: [300, 50, 100],

        backgroundColor: [

        '#FF6384',

        '#36A2EB',

        '#FFCE56'

        ],

        hoverBackgroundColor: [

        '#FF6384',

        '#36A2EB',

        '#FFCE56'

        ]

    }],

  text: '23%'

};



class DonutWithText extends React.Component {



  render() {

    return (

      <div>

        <h2>React Doughnut with Text Example</h2>

        <Doughnut data={data} />

      </div>

    );

  }

};



ReactDOM.render(

  <DonutWithText />,

  document.getElementById('root')

);


<script src="https://gor181.github.io/react-chartjs-2/common.js"></script>

<script src="https://gor181.github.io/react-chartjs-2/bundle.js"></script>



<div id="root">

</div>

由于一些奇怪的控制台错误，您必须向下滚动一点才能看到运行CodeSnippet的内容。

尽管它在CodePen中正常工作，但我在哪里写的：http
://codepen.io/anon/pen/OpdBOq?editors=1010

2020-07-22