这是我第一次在Stack Overflow上发布问题（我希望我做对了）。 我在使用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/
例如仅用一个SVG元素进行提琴演奏。 https://jsfiddle.net/twm5h1e7/4/
答案 0 :(得分：0)
图表的高度不能包含所有行时，将显示多余的<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>