Question

我创建了一个“甜甜圈”图表，该图表可以正常工作，但是现在我需要在其中心显示数字45。

我应该在哪里指示要显示的文本和坐标？在图表的选项中？

我正在使用React组件

class DoughnutChart extends React.Component {

  render() {
    const data = {
      datasets: [{
      data: [],
      backgroundColor: [
        '#999',
        '#eee'
      ]
    }],
     text: '45'
  };
    return (
       <Doughnut data={data} />
    );
  }
};

export default DoughnutChart;

编辑

我找到了此插件，但找不到适用于react组件的

//Plugin for center text
Chart.pluginService.register({
  beforeDraw: function(chart) {
    var width = chart.chart.width,
    height = chart.chart.height,
    ctx = chart.chart.ctx;
    ctx.restore();
    var fontSize = (height / 160).toFixed(2);
    ctx.font = fontSize + "em sans-serif";
    ctx.textBaseline = "top";
    var text = "Foo-bar",
    textX = Math.round((width - ctx.measureText(text).width) / 2),
    textY = height / 2;
    ctx.fillText(text, textX, textY);
    ctx.save();
  }
});

感谢您的帮助。

Answer 1

根据我从react-chartjs-2看到的内容，它仅具有以下属性：

data: (PropTypes.object | PropTypes.func).isRequired,
width: PropTypes.number,
height: PropTypes.number,
id: PropTypes.string,
legend: PropTypes.object,
options: PropTypes.object,
redraw: PropTypes.bool,
getDatasetAtEvent: PropTypes.func,
getElementAtEvent: PropTypes.func,
getElementsAtEvent: PropTypes.func
onElementsClick: PropTypes.func, // alias for getElementsAtEvent (backward compatibility)

它们似乎都不是文本，您可以传递以在中间显示您的电话号码。您也许可以使用图例道具并操纵为图例创建的对象，以使用CSS将其移动，或在渲染器中设置另一个div，以显示数字，然后在图表内设置样式。

另一种可能的方法是，将Donut组件包装在div中，并在该div中包含另一个包含文本的子级，如下所示：

    return( 
    <div className='wrapper'> 
        <div className='chart-number'>{this.state.text}</div>
        <Doughnut data={data} />
    </div>)

在您的CSS中，您将必须弄清楚如何将图表编号div放置在包装div的中间，该div包含图表。

如果您只是开始使用该库，也许会寻找一个适合您需求的库，这样就不必编写代码了！

希望这会有所帮助：）

编辑1：

据我所知，您可能需要将Chart.pluginService.register代码连接到图形对象<Doughnut />上，然后在重绘之前进行计算。

Answer 2

我不认为React Chart JS具有此选项。但是，那里有自定义插件，可让您在甜甜圈图中插入自定义数据标签。请参阅此文档以了解如何完成此操作。

ChartJS Plugin Datalabels

Answer 3

我试过了，它奏效了

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

function DoughnutChart() {

 const data = {...}

 const options = {...}

 const plugins = [{
     beforeDraw: function(chart) {
      var width = chart.width,
          height = chart.height,
          ctx = chart.ctx;
          ctx.restore();
          var fontSize = (height / 160).toFixed(2);
          ctx.font = fontSize + "em sans-serif";
          ctx.textBaseline = "top";
          var text = "Foo-bar",
          textX = Math.round((width - ctx.measureText(text).width) / 2),
          textY = height / 2;
          ctx.fillText(text, textX, textY);
          ctx.save();
     } 
   }]



  return (
   
        <Doughnut 
          type="doughnut" 
          data={data} 
          options{options} 
          plugins={plugins} 
         />
  );
}

export default DoughnutChart;

Answer 4

这是一个简单的解决方案：

步骤01： 将此选项添加到您的选项中

options: {
        centerText: {
            display: true,
            text: `90%`
        }
      .....
      .....

步骤02： 创建新方法drawInnerText

drawInnerText = (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 = chart.config.options.centerText.text,
        textX = Math.round((width - ctx.measureText(text).width) / 2),
        textY = height / 2;

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

步骤03：调用drawInnerText

componentWillMount() {
        Chart.Chart.pluginService.register({
            beforeDraw: function (chart) {                    
                if (chart.config.options.centerText.display !== null &&
                    typeof chart.config.options.centerText.display !== 'undefined' &&
                    chart.config.options.centerText.display) {
                    this.drawInnerText(chart);
                }
            },
        });
    }

Answer 5

function DoughnutChart({ data = {} }) {
 return (
   <Doughnut
     data={format(dataObj)}
     plugins={[
      {
        beforeDraw(chart) {
         const { width } = chart;
         const { height } = chart;
         const { ctx } = chart;
         ctx.restore();
         const fontSize = (height / 160).toFixed(2);
         ctx.font = `${fontSize}em sans-serif`;
         ctx.textBaseline = 'top';
         const { text } = "23";
         const textX = Math.round((width - ctx.measureText(text).width) / 2);
         const textY = height / 2;
         ctx.fillText(text, textX, textY);
         ctx.save();
       },
     },
   ]}
 />);

}

在React-Chartjs-2框的Donut图表内添加文本以做出反应

5 个答案: