Dygraph не будет отображаться на карте Bootstrap - PullRequest
Новая
       22

Dygraph не будет отображаться на карте Bootstrap

1 голос
/ 07 апреля 2020

Я хочу создать граф графиков во втором столбце тела карты Bootstrap (это выглядит красиво и чисто). Dygraph использует div graphdiv. Я использую this.$refs.graphdiv, чтобы попытаться получить к нему доступ из моего скрипта vue.

Если я переместу graphdiv <div> за пределы карты, то это сработает (см. Комментарий). Почему диграф не будет работать с картой bootstrap? Это всего лишь одна из тех вещей совместимости, которую нужно авторизовать у разработчика и дождаться исправления? 

<template>
<div>
     <div class="card">
        <div class="card-header">HEADER</div>
        <div class="card-body">
          <div class="row">
            <div class="col-sm-3" style="width: 100%">
            </div>

            <div class="col-sm-9">
                  <div id="graphdiv" style="width: 100%" ref="graphdiv"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
<!--Comment: IF I PLACE IT HERE IT WORKS -->
</div>
</template>

Вот уменьшенная версия скрипта: 

<script>
import Dygraph from "dygraphs";
export default {
methods:{
    plot_chart_series() {
      //dataset = my data that I want to plot
      const g = new Dygraph(this.$refs.graphdiv, dataset, {//options});

    }
}
};
<script>

PS

Моя причина использования dygraph в том, что я хочу построить довольно большой набор данных (+ -30000 точек данных), график. js и Apexchart не может справиться с этим (я потратил большую часть 3 часов, пытаясь заставить их работать) ). Если нет решения для моей проблемы выше, какие другие графические библиотеки, которые являются Vue дружественными, которые могут обрабатывать большие наборы данных?

1 Ответ

0 голосов
/ 07 апреля 2020

Обходной путь

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

    <div class="card" ref="carder">
      <div class="card-header">Graph</div>
      <div class="card-body">
        <div class="row">
          <div class="col-sm-3">
            <button>A_BUTTON</button>
          </div>
          <div class="col-sm-9">
            <div ref="graphdiv" style="width: 100%"></div>
          </div>
        </div>
      </div>
    </div>

Приведенный выше фрагмент кода работал для меня.

Изменения к оригиналу:

  1. У меня было свойство id="some_id" в родительском div, содержащем его, которое я удалил.
  2. Вся карта была завернута в другой div. Этот div имел свойство ref="some_ref", которое я использовал из скрипта Vue для переключения видимости. Я сделал это с this.$refs.some_ref.style.display = "block"; & this.$refs.some_ref.style.display = "none";. Я изменил его на следующий this.$refs.some_ref.style.visibility = "hidden"; и просто изменил hidden на visible, когда я хотел показать карту. (Меня не беспокоит, что скрытый элемент по-прежнему занимает место)

Если я верну изменение номера 2, приведенное выше, к оригиналу, оно не будет отображаться. Я до сих пор не могу это объяснить, но это работает.

...