javascript - 如何阻止 Google Charts 为单个图表创建两个 SVG？
问题描述
这是我第一次在 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/
解决方案
<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>推荐阅读
- python - 单击后更改按钮活动状态
- java - 带有 Redis 会话的嵌入式 tomcat 8.5 的 Spring boot 2.0 和 Spring security
- actions-on-google - 以编程方式更改谷歌助手语音
- apache-kafka - NiFi Avro Kafka 消息纳米时间戳（19 位）以毫秒为单位转换为时间戳
- recursion - 这个递归在这个例子中是如何工作的？
- html - 加载骨架效果作为图像的背景颜色
- c# - 如何使用 C# 中的 CHKDSK 工具并在 CMD 窗口中显示文本？
- c++ - 如何根据第二个元素对 std::set 进行排序？
- php - Oxid E-shop 管理面板和 Shop Frontend Giving localhost 500 错误
- r - 将分组变量的第一个值和最后一个值粘贴在一起