Как использовать Chart.js с реагировать Хук? - PullRequest
Новая
       0

Как использовать Chart.js с реагировать Хук?

1 голос
/ 25 сентября 2019

Я пытаюсь создать панель мониторинга с React J, используя хуки, данные обычно берутся из APi, но для проверки я помещаю жесткие значения в массив.Я получаю сетку, но никакое значение не принимается во внимание.Я не знаю, что я делаю неправильно, а также хочу знать, является ли chart.js лучшим выбором.

Вот ошибка, которую я получаю 

index.js:1375 Warning: Failed prop type: Invalid prop `data` supplied to `ChartComponent`.
    in ChartComponent (created by Bar)
    in Bar (at ErrorChart.js:8)
    in div (at ErrorChart.js:7)
    in ErrorChart (at App.js:20)
    in div (at App.js:18)
    in App (at src/index.js:7)

import React, { useState, useEffect } from "react";
import ProgressBar from "./ActivityAlert/ErrorMonitoring/ProgressBar";
import ErrorRanking from "./ActivityChart/ErrorChart/ErrorChart";
import ErrorChart from "./ActivityChart/ErrorChart/ErrorChart";

const App = () => {
  const [percentage, setpercentage] = useState(1);
  const [data, setData] = useState( [])

  useEffect(() => {
    setpercentage(80);

    setData(["12","13","14"])

  }, [setpercentage,setData]);

  return (
    <div>
      {/* <ProgressBar percentage={percentage}  /> */}
      <ErrorChart data= {data} />
    </div>
  );
};

export default App;



import React  from "react";
import {Bar} from 'react-chartjs-2'

const ErrorChart = ({data}) =>{

return (
<div>
    <Bar data={data}>

    </Bar>
</div>
  );

}
export default ErrorChart

Я хочу показать данные из этого небольшого массива

1 Ответ

0 голосов
/ 25 сентября 2019

Структура ваших данных недействительна.Вам нужно передать объект, который должен иметь ключи labels и datasets.

Образцы данных можно найти в документации.

Вместо ["12", "13", "14], попробуйте передать этообъект: 

{
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    }

Рабочая демонстрация: https://stackblitz.com/edit/react-cdmfuu

...