Как импортировать график в компонент React?
Я пытаюсь использовать диаграммы по ссылке chartist.js: https://gionkunz.github.io/chartist-js/examples.html#simple-line-chart
Когда я пытаюсь использовать их в своем коде, я получаю от Chartist определение, как мне импортировать его в свой компонент?
Код:
import React, { Component } from 'react';
import chartistGraph from "react-chartist";
const simpleLineChartData = {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
series: [
[12, 9, 7, 8, 5],
[2, 1, 3.5, 7, 3],
[1, 3, 4, 5, 6]
]
}
class Chart extends Component {
render(){
return(
<div>
<chartistGraph data = {simpleLineChartData} type = {'Line'} />
</div>
)}
}
export default Chart;
Приведенный выше код дает ошибку, говоря, что Chartist не определяет. Как импортировать библиотеку и использовать ее в reactjs.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Запустить
npm install react-chartist --save
Еще одна вещь, вам также необходимо установить chartist, поскольку это зависимость
npm install chartist --save.
После этого вы сможете импортировать Chartist в свое приложение.
import chartistGraph from "react-chartist";
Вот ссылка, как это можно реализовать в codeandbox. коды и ящик Ссылка
Перейдите по этой ссылке для реализации Ссылка на сайт
Я обновил свой код, проверьте его, но я получаю сообщение об ошибке: не могу разрешить chartist
вы перезапустили сервер, вам это нужно.
это кажется неправильным, поскольку ChartListGraph - еще одна библиотека.
@Manoj Я хочу использовать это -> gionkunz.github.io/chartist-js/index.html, но не могу найти, как импортировать его в reactjs. Любой код был бы полезен, чтобы понять, как использовать его в реагирующем компоненте gionkunz.github.io/chartist-js/examples.html#stacked-bar.
@ stack26 Я хочу использовать этот gionkunz.github.io/chartist-js/index.html, такой же он или другой.
это импорт по умолчанию, вы можете дать ему любое имя. react-chartist - это оболочка для chartist js. Это то же самое
@ stack26 Я перезапустил сервер, но все равно ошибка.
теперь следуйте новым указанным инструкциям и перезапустите сервер. Это обязательно должно сработать
@ stack26 Я пытался, как вы упомянули, но все еще выдает ошибку, пожалуйста, посмотрите изображения imgur imgur.com/a/LfePWsP каждого из моих файлов. Пожалуйста, проверьте эти 4-5 скриншотов. Я добавляю компонент Chart в свой компонент App.
да, установите chartist, также npm install chartist --save, я упомянул в ответе. и перезапустите сервер, он будет работать. Я не вижу графиков как зависимости в вашем package.json. вот почему он не работает
@ stack26 Убедитесь, что package.json видит, что это вторая строка в зависимостях.
Это react-chartist, вам также нужно установить chartist. React-chartist - это просто оболочка вокруг чартиста
беги, как я уже упоминал в ответе
Существует проблема с разрешением: человек запускает терминал от имени администратора. Запустить от имени администратора. тогда вы сможете его установить. запустите эту команду в adimintrator envvironment howtogeek.com/194041/…. Установить себя не получилось
Позвольте нам продолжить обсуждение в чате.
@ stack26 Я наконец решил это проверить -> stackoverflow.com/questions/50702740/…
@stonerock отлично !!. поздравляю
@ stack26 Не могли бы вы мне помочь: stackoverflow.com/questions/50733529/…
Вы можете импортировать ChartistGraph из react-chartist как:
import ChartistGraph from 'react-chartist';
или же
var ChartistGraph = require('react-chartist')
Кроме того, response-chartist не включает файлы css для Chartist, поэтому, если вы хотите добавить стили, добавьте это в свой файл index.html:
<link rel = "stylesheet" href = "//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
<script src = "//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js</script>
Или вы можете установить пакет 'chartist'
npm install chartist
Он такой же, как этот -> gionkunz.github.io/chartist-js/index.html, или другой.
Да, это то же самое
Вы пробовали импортировать библиотеку? var ChartistGraph = require ('react-chartist') попробуйте это. Он будет включать в себя библиотеку графиков.