谷歌可视化饼图-改变文本坐标
Google Visualization Pie Chart - changing text coordinates
我做了一个简单的甜甜圈图(基于谷歌可视化示例https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart#donut)。
因为它只显示一个切片(另一个是透明/不可见的),我想将<text>
元素移动到图表的中心,即在孔内。我知道,它只是涉及更新'x'和'y'坐标属性,但我有麻烦访问他们在DOM,特别是因为没有id/类挂在。
那么,我如何在代码中针对倒数第二个<g>
元素的<text>
元素呢?我想将x="239.45622566746957" y="285.69328724429994"
更改为x="200" y="200"
首选Javascript,但jQuery也可以…
<div id="donutchart" style="position: relative;">
<div style="position: relative; width: 560px; height: 412px;" dir="ltr">
<div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;">
<svg width="560" height="412" style="overflow: hidden;" aria-label="A chart.">
<defs id="defs"/>
<rect x="0" y="0" width="560" height="412" stroke="none" stroke-width="0" fill="#ffffff"/>
<g>
<text text-anchor="start" x="107" y="58.2" font-family="Arial" font-size="12" font-weight="bold" stroke="none" stroke-width="0" fill="#000000">Time spent at work</text>
</g>
<g>
<rect x="340" y="79" width="113" height="31" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"/>
<g>
<rect x="340" y="79" width="113" height="12" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"/>
<g>
<text text-anchor="start" x="357" y="89.2" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#222222">Work</text>
</g>
<rect x="340" y="79" width="12" height="12" stroke="none" stroke-width="0" fill="#b1d123"/>
</g>
<g>
<rect x="340" y="98" width="12" height="12" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"/>
<rect x="340" y="98" width="12" height="12" stroke="none" stroke-width="0" fill-opacity="1" fill="none"/>
</g>
</g>
<g>
<path d="M179.37407264075225,181.84279120188216L127.43518160188061,144.10697800470538A107,107,0,0,1,214,100L214,164.2A42.800000000000004,42.800000000000004,0,0,0,179.37407,181.84279" stroke="#ffffff" stroke-width="1" fill-opacity="1" fill="none"/>
<text text-anchor="start" x="163.54377433253043" y="136.70671275570004" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#ffffff">15%</text>
</g>
<g>
<path d="M214,164.2L214,100A107,107,0,1,1,127.43518,144.10697L179.37407264075225,181.84279120188216A42.800000000000004,42.800000000000004,0,1,0,214,164.19999" stroke="#ffffff" stroke-width="1" fill="#b1d123"/>
<text text-anchor="start" x="239.45622566746957" y="285.69328724429994" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#ffffff">85%</text>
</g>
<g/>
</svg>
</div>
</div>
<div style="display: none; position: absolute; top: 422px; left: 570px; white-space: nowrap; font-family: Arial; font-size: 12px; font-weight: bold;">85 (85%)
</div>
<div></div>
</div>
像这样使用选择器:
document.querySelector('#donutchart svg > g:nth-last-child(2) text');
这在IE8中不起作用,因为旧版本的IE不支持SVG。如果您需要支持IE8,则需要为等效的VML结构提供选择器。
相关文章:
- 用于根据用户改变文本区域的字体颜色的JavaScript'的选择
- Jquery改变文本框边框,但只有一次
- jQuery在选择选项时不改变文本
- JavaScript代码通过点击不同的图像来改变文本区域的值
- 多个显示/隐藏改变文本
- 改变文本拖动根据一些条件- Extjs 4
- 如何在元素悬停时动态改变文本
- 旧的javascript程序来改变文本和背景颜色的单元格
- 如何改变文本时倒数零
- 使用指令式Angular JS动态改变文本的颜色
- 改变文本区域onclick的值将插入符号置于一个奇怪的位置,但仅在IE中
- 如何在没有第三方JS库的情况下改变文本区域滚动条的颜色
- 如何使用Angularjs指令根据动态值改变文本颜色
- 随着HTML5范围滑动条的移动,不断改变文本框的值
- 改变文本的颜色在定时间隔
- 动态crm:用javascript改变文本方向
- 我的javascript只工作,它's不改变文本
- 谷歌可视化饼图-改变文本坐标
- 如何改变文本颜色的背景变化
- 我有一个按钮,可以在点击时改变文本,但不会变回来