Question

Я впервые пишу вопрос о переполнении стека (надеюсь, я делаю это правильно). У меня проблемы с графиком временной шкалы Google, поскольку он создает второй элемент SVG в разметке. Я хочу нацелиться на SVG, но, похоже, его содержимое иногда распространяется на два элемента SVG. Мне удалось воспроизвести проблему, используя один из примеров Google, три строки данных работают нормально (создается один элемент SVG), однако, если в нем более трех строк, создается второй элемент SVG. Это то, что я могу изменить?

Спасибо

Этот код создаст два элемента SVG в разметке (я хочу только один).

      google.charts.load('current', {'packages':['timeline']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var container = document.getElementById('timeline');
        var chart = new google.visualization.Timeline(container);
        var dataTable = new google.visualization.DataTable();

        dataTable.addColumn({ type: 'string', id: 'President' });
        dataTable.addColumn({ type: 'date', id: 'Start' });
        dataTable.addColumn({ type: 'date', id: 'End' });
                 dataTable.addRows([

          [ 'Adams8',      new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
          [ 'Washington9', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
          [ 'Adams10',      new Date(1797, 2, 4),  new Date(1801, 2, 4) ],         
          [ 'Jefferson11',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);

        chart.draw(dataTable);
      }

Так выглядит разметка при создании двух элементов SVG

<div id="timeline" style="height: 180px;">
    <div style="position: relative;">
        <div style="position: relative; width: 793px; height: 180px;" dir="ltr">
            <div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;">
        (First SVG)        <svg width="793" height="180" style="overflow: hidden;" aria-label="A chart.">
                    <defs id="_ABSTRACT_RENDERER_ID_0"></defs>
                    <g>
                        <text text-anchor="middle" x="124.87524076192885" y="151.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#000000">1790</text>
                        <text text-anchor="middle" x="464.5278076434366" y="151.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#000000">1800</text>
                    </g>
                    <g></g>
                    <g></g>
                </svg>
                <div style="height: 130px; overflow-x: hidden; overflow-y: scroll; width: 793px; position: absolute; top: 0px; left: 0px;">
              ( Second SVG)     <svg width="793" height="163.968" style="overflow: hidden;" aria-label="A chart.">
                        <defs id="_ABSTRACT_RENDERER_ID_1"></defs>
                        <g>
                            <rect x="0" y="0" width="793" height="40.992" stroke="none" stroke-width="0" fill="#ffffff"></rect>
                            <path d="M102,0L102,40.992" stroke="#e6e6e6" stroke-width="1" fill-opacity="1" fill="none"></path>
                            <path d="M124.87524076192885,0L124.87524076192885,40.992" stroke="#e6e6e6" stroke-width="1" fill-opacity="1" fill="none"></path>
                            <path d="M464.5278076434366,0L464.5278076434366,40.992" stroke="#e6e6e6" stroke-width="1" fill-opacity="1" fill="none"></path>
                            <rect x="0" y="40.992" width="793" height="40.992" stroke="none" stroke-width="0" fill="#e6e6e6"></rect>
                            <path d="M102,40.992L102,81.984" stroke="#ffffff" stroke-width="1" fill-opacity="1" fill="none"></path>
                            <path d="M124.87524076192885,40.992L124.87524076192885,81.984" stroke="#ffffff" stroke-width="1" fill-opacity="1" fill="none"></path>
                            <path d="M464.5278076434366,40.992L464.5278076434366,81.984" stroke="#ffffff" stroke-width="1" fill-opacity="1" fill="none"></path>
                            <rect x="0" y="81.984" width="793" height="40.992" stroke="none" stroke-width="0" fill="#ffffff"></rect>
                            <path d="M102,81.984L102,122.976" stroke="#e6e6e6" stroke-width="1" fill-opacity="1" fill="none"></path>
                            <path d="M124.87524076192885,81.984L124.87524076192885,122.976" stroke="#e6e6e6" stroke-width="1" fill-opacity="1" fill="none"></path>
                            <path d="M464.5278076434366,81.984L464.5278076434366,122.976" stroke="#e6e6e6" stroke-width="1" fill-opacity="1" fill="none"></path>
                            <rect x="0" y="122.976" width="793" height="40.992" stroke="none" stroke-width="0" fill="#e6e6e6"></rect>
                            <path d="M102,122.976L102,163.968" stroke="#ffffff" stroke-width="1" fill-opacity="1" fill="none"></path>
                            <path d="M124.87524076192885,122.976L124.87524076192885,163.968" stroke="#ffffff" stroke-width="1" fill-opacity="1" fill="none"></path>
                            <path d="M464.5278076434366,122.976L464.5278076434366,163.968" stroke="#ffffff" stroke-width="1" fill-opacity="1" fill="none"></path>
                            <path d="M0,40.992L793,40.992" stroke="#b7b7b7" stroke-width="1" fill-opacity="1" fill="none"></path>
                            <path d="M0,81.984L793,81.984" stroke="#b7b7b7" stroke-width="1" fill-opacity="1" fill="none"></path>
                            <path d="M0,122.976L793,122.976" stroke="#b7b7b7" stroke-width="1" fill-opacity="1" fill="none"></path>
                            <text text-anchor="end" x="89" y="25.046" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#4d4d4d">Adams8</text>
                            <text text-anchor="end" x="89" y="66.038" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#4d4d4d">Washington9</text>
                            <text text-anchor="end" x="89" y="107.02999999999999" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#4d4d4d">Adams10</text>
                            <text text-anchor="end" x="89" y="148.02200000000002" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#4d4d4d">Jefferson11</text>
                            <rect x="0" y="0" width="793" height="163.968" stroke="#9a9a9a" stroke-width="1" fill-opacity="1" fill="none"></rect>
                        </g>
                        <g></g>
                        <g>
                            <rect x="368.45412155674506" y="9" width="135.78662312349434" height="22.991999999999997" stroke="none" stroke-width="0" fill="#4285f4"></rect>
                            <rect x="103" y="49.992" width="265.45412155674506" height="22.991999999999997" stroke="none" stroke-width="0" fill="#db4437"></rect>
                            <rect x="368.45412155674506" y="90.984" width="135.78662312349434" height="22.991999999999997" stroke="none" stroke-width="0" fill="#f4b400"></rect>
                            <rect x="504.2407446802394" y="131.976" width="271.7592553197606" height="22.991999999999997" stroke="none" stroke-width="0" fill="#0f9d58"></rect>
                        </g>
                        <g></g>
                        <g></g>
                    </svg>
                </div>
            </div>
        </div>
        <div style="display: none; position: absolute; top: 190px; left: 803px; white-space: nowrap; font-family: Arial; font-size: 13px;" aria-hidden="true">1790</div>
        <div></div>
    </div>
</div>

Этот код работает нормально, у него просто на одну строку данных меньше, и он создает только один элемент SVG.

      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var container = document.getElementById('timeline');
        var chart = new google.visualization.Timeline(container);
        var dataTable = new google.visualization.DataTable();

        dataTable.addColumn({ type: 'string', id: 'President' });
        dataTable.addColumn({ type: 'date', id: 'Start' });
        dataTable.addColumn({ type: 'date', id: 'End' });
                 dataTable.addRows([

          [ 'Adams8',      new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
          [ 'Washington9', new Date(1789, 3, 30), new Date(1797, 2, 4) ],      
          [ 'Jefferson11',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);

        chart.draw(dataTable);
      }

Так выглядит разметка, когда у меня три строки. Я хотел бы, чтобы разметка всегда была независимо от количества строк (один элемент SVG)

<div id="timeline" style="height: 180px;">
    <div style="position: relative;">
        <div style="position: relative; width: 793px; height: 180px;" dir="ltr">
            <div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;">
         (Just the one SVG) <svg width="793" height="180" style="overflow: hidden;" aria-label="A chart.">
                    <defs id="_ABSTRACT_RENDERER_ID_0"></defs>
                    <g>
                        <rect x="0" y="0" width="793" height="40.992" stroke="none" stroke-width="0" fill="#ffffff"></rect>
                        <path d="M102,0L102,40.992" stroke="#e6e6e6" stroke-width="1" fill-opacity="1" fill="none"></path>
                        <path d="M125.45221270993002,0L125.45221270993002,40.992" stroke="#e6e6e6" stroke-width="1" fill-opacity="1" fill="none"></path>
                        <path d="M473.67168409735115,0L473.67168409735115,40.992" stroke="#e6e6e6" stroke-width="1" fill-opacity="1" fill="none"></path>
                        <rect x="0" y="40.992" width="793" height="40.992" stroke="none" stroke-width="0" fill="#e6e6e6"></rect>
                        <path d="M102,40.992L102,81.984" stroke="#ffffff" stroke-width="1" fill-opacity="1" fill="none"></path>
                        <path d="M125.45221270993002,40.992L125.45221270993002,81.984" stroke="#ffffff" stroke-width="1" fill-opacity="1" fill="none"></path>
                        <path d="M473.67168409735115,40.992L473.67168409735115,81.984" stroke="#ffffff" stroke-width="1" fill-opacity="1" fill="none"></path>
                        <rect x="0" y="81.984" width="793" height="40.992" stroke="none" stroke-width="0" fill="#ffffff"></rect>
                        <path d="M102,81.984L102,122.976" stroke="#e6e6e6" stroke-width="1" fill-opacity="1" fill="none"></path>
                        <path d="M125.45221270993002,81.984L125.45221270993002,122.976" stroke="#e6e6e6" stroke-width="1" fill-opacity="1" fill="none"></path>
                        <path d="M473.67168409735115,81.984L473.67168409735115,122.976" stroke="#e6e6e6" stroke-width="1" fill-opacity="1" fill="none"></path>
                        <path d="M0,40.992L793,40.992" stroke="#b7b7b7" stroke-width="1" fill-opacity="1" fill="none"></path>
                        <path d="M0,81.984L793,81.984" stroke="#b7b7b7" stroke-width="1" fill-opacity="1" fill="none"></path>
                        <text text-anchor="end" x="89" y="25.046" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#4d4d4d">Adams8</text>
                        <text text-anchor="end" x="89" y="66.038" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#4d4d4d">Washington9</text>
                        <text text-anchor="end" x="89" y="107.02999999999999" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#4d4d4d">Jefferson11</text>
                        <rect x="0" y="0" width="793" height="122.976" stroke="#9a9a9a" stroke-width="1" fill-opacity="1" fill="none"></rect>
                    </g>
                    <g>
                        <text text-anchor="middle" x="125.45221270993002" y="144.026" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#000000">1790</text>
                        <text text-anchor="middle" x="473.67168409735115" y="144.026" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#000000">1800</text>
                    </g>
                    <g></g>
                    <g>
                        <rect x="375.1747744743484" y="9" width="139.2115082764608" height="22.991999999999997" stroke="none" stroke-width="0" fill="#4285f4"></rect>
                        <rect x="103" y="49.992" width="272.1747744743484" height="22.991999999999997" stroke="none" stroke-width="0" fill="#db4437"></rect>
                        <rect x="514.3862827508092" y="90.984" width="278.6137172491908" height="22.991999999999997" stroke="none" stroke-width="0" fill="#f4b400"></rect>
                    </g>
                    <g></g>
                    <g></g>
                    <g></g>
                    <g></g>
                </svg>
            </div>
        </div>
        <div style="display: none; position: absolute; top: 190px; left: 803px; white-space: nowrap; font-family: Arial; font-size: 13px;" aria-hidden="true">1790</div>
        <div></div>
    </div>
</div>

Скрипка для примера с двумя элементами SVG. https://jsfiddle.net/twm5h1e7/3/

Fiddle, например, с одним элементом SVG. https://jsfiddle.net/twm5h1e7/4/

WhiteHat · Answer 1 · 18 апреля 2019

дополнительные <svg> появляются, когда высота диаграммы не может содержать все строки.
высота по умолчанию составляет всего 200.
цель состоит в том, чтобы позволить диаграмме прокручиваться вертикально,
при сохранении оси X видимой.

для предотвращения второго <svg>, установите опцию height, чтобы гарантировать, что все диаграммы видны.

chart.draw(dataTable, {
  height: (dataTable.getNumberOfRows() * 45) + 45
});

см. Следующий рабочий фрагмент ...

google.charts.load('current', {
  packages:['timeline']
}).then(function () {
  var container = document.getElementById('timeline');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn({type: 'string', id: 'President'});
  dataTable.addColumn({type: 'date', id: 'Start'});
  dataTable.addColumn({type: 'date', id: 'End'});
  dataTable.addRows([
    ['Adams8', new Date(1797, 2, 4), new Date(1801, 2, 4)],
    ['Washington9', new Date(1789, 3, 30), new Date(1797, 2, 4)],
    ['Adams10', new Date(1797, 2, 4), new Date(1801, 2, 4)],
    ['Jefferson11', new Date(1801, 2, 4), new Date(1809, 2, 4)]
  ]);
  chart.draw(dataTable, {
    height: (dataTable.getNumberOfRows() * 45) + 45
  });
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="timeline"></div>

Как мне остановить Google Charts при создании двух SVG для одного графика?

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Как мне остановить Google Charts при создании двух SVG для одного графика?

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Похожие темы