javascript - 如何放置上标谷歌图表标题？

Question

我有下一个代码

var title = 'hello<sup>2</sup>';

现在我正在使用 google charts我希望 2 显示为上标。

我明白了

hello<sup>2</sup>

标题上的代码是

<text text-anchor="start" x="148" y="52.9" font-family="Arial" font-size="14" font-weight="bold" stroke="none" stroke-width="0" fill="#000000">Hello<sup>2</sup></text>

这是一个 svg，现在我试过了，下一个

var title = 'hello<text style="vertical-align: super">2</text>';

但是我明白了

hello<text style="vertical-align: super">2</text>

关于如何将 2 作为上标有什么想法吗？

Answer 1

最简单的方法(如果您只想为标题执行此操作)是制作一个单独的 div，其中包含 HTML 中的标题文本。如果您确实想在 Google Charts 中本地执行此操作，则需要编写 javascript 来处理标题 svg。

要在 SVG 中创建上标，您可以查看 this article .如您所见，您需要 SVG 将标题文本更改为如下内容:

<svg viewBox = "0 0 500 300" version = "1.1">
    <desc>
        Text example
    </desc>
    <g fill = "navy">
        <text x = "10" y = "25" font-size = "20">
            <tspan>
                e = mc
                <tspan baseline-shift = "super">
                    2
                </tspan>
            </tspan>
            <tspan x = "10" y = "60">
                T
                <tspan baseline-shift = "sub">
                    i+2
                </tspan>
                =T
                <tspan baseline-shift = "sub">
                    i
                </tspan>
                + T
                <tspan baseline-shift = "sub">
                    i+1
                </tspan>
            </tspan>
        </text>
    </g>
</svg>

因此，在您的情况下，您可以尝试查找标题的文本，并使用 jquery 操作 SVG。当然单独做一个<div>会简单很多带有 HTML 标题，但选择权在您。