Как отобразить таблицы Excel на веб-странице - PullRequest
Новая
       39

Как отобразить таблицы Excel на веб-странице

0 голосов
/ 14 января 2020

Существует около 40 листов Excel, которые содержат почасовые отчеты о производительности. Имеет диаграммы на листе с цветовым кодированием.

Мне нужно отображать диаграммы Excel на веб-странице, чтобы диаграммы на веб-странице также обновлялись при изменении таблицы Excel. Как я могу достичь этого?

Я новичок в компании, и это мой первый проект, и я понимаю, что должен использовать JavaScript и реагировать на это, но я не уверен, как начать и какой подход мне выбрать.

Кто-нибудь может дать несколько советов, как мне начать?

1 Ответ

0 голосов
/ 14 января 2020

Редактирование: объединение Excel в реальном времени для динамического изменения диаграмм (это проблема с бэкендом) -

1. Вам необходимо подключить базу данных в Excel.

2 .Создание уровня API для связи с внешним интерфейсом и базой данных.

3. Создание внешнего интерфейса

https://docs.microsoft.com/en-us/azure/sql-database/sql-database-connect-excel

Для не динамически:

  1. Загрузка данных из Excel в .csv
  2. Преобразование данных в json: http://www.convertcsv.com/csv-to-json.htm
  3. Интуитивно, вы должны знать, какой график будет наиболее подходящим

enter image description here

Выберите подходящую библиотеку (https://dev.to/giteden/top-5-react-chart-libraries-for-2020-1amb)

Теперь вопрос в том, как эти данные должны измениться? Должны ли они быть динамичными c? Вы можете начать с создания примитивного отображения данных:

У вас есть данные. json, вы можете:

  • прочитать их из файла
  • вручную
  • соединение с базой данных

Пример компонента - (схемы будет более сложным) 

const data = [
    {
        "Name": "David",
        "Age": 27,
        "Hour": "7"
    },
    {
        "Name": "Ton",
        "Age": 26,
        "Hour": "12"
    },
    {
        "Name": "Kitty",
        "Age": 30,
        "Hour": "12"
    },
    {
        "Name": "Linda",
        "Age": 30,
        "Hour": "2"
    },
    {
        "Name": "Joe",
        "Age": 40,
        "Hour": "24"
    }
]


      <LineChart width={500} height={300} data={data}>
        <XAxis dataKey="name"/>
        <YAxis/>
        <CartesianGrid stroke="#eee" strokeDasharray="5 5"/>
        <Line type="monotone" dataKey="uv" stroke="#8884d8" />
        <Line type="monotone" dataKey="pv" stroke="#82ca9d" />
      </LineChart>
...