Добавьте текст в кольцевую диаграмму окна React-Chartjs-2, чтобы отреагировать - PullRequest
Новая
       36

Добавьте текст в кольцевую диаграмму окна React-Chartjs-2, чтобы отреагировать

0 голосов
/ 30 октября 2018

Я создал кольцевую диаграмму, которая работает правильно, но теперь мне нужно показать число 45 в центре, например.

Где я должен указать отображаемый текст и координаты? В настройках графика?

Я использую компонент реакции 

class DoughnutChart extends React.Component {

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

export default DoughnutChart;

EDIT

Я нашел этот плагин, но не могу найти, как он применяется к компоненту реакции 

//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();
  }
});

Спасибо за вашу помощь.

Ответы [ 2 ]

0 голосов
/ 30 октября 2018

Я не верю, что в React Chart JS эта опция доступна. Тем не менее, существуют специальные плагины, которые позволяют вам вставлять собственные метки данных в свои кольцевые диаграммы. Пожалуйста, обратитесь к этой документации о том, как это сделать.

ChartJS Plugin Datalabels

0 голосов
/ 30 октября 2018

Из того, что я видел из response-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-оболочки, которая будет содержать диаграмму.

Если вы только начинаете использовать эту библиотеку, возможно, ищите другую, которая соответствует вашим потребностям, чтобы вам не приходилось кодировать ее!

Надеюсь, это поможет:)

РЕДАКТ. 1:

Из того, что я вижу, вам, вероятно, нужно каким-то образом подключить код Chart.pluginService.register к вашему графическому объекту, который является компонентом <Doughnut />, тогда он выполнит вычисление до перерисовки.

...