javascript - 如何使用现有的 SVG 符号(在文件中)作为 highcharts 中的标记？

Question

我想使用 Weather Icons作为我图表中的标记，但它们最好⁽¹⁾用作 CSS:

<i class="wi wi-night-sleet"></i>

我在 custom markers demo 中看到可以使用多种方法来自定义标记 - 但没有围绕 HTML/CSS。

docs for plotOptions.series.marker.symbol (也在上面的演示中引用)提到可以使用 SVG 作为标记。天气图标还包括 SVG version . 有没有办法使用它们？(我什至不知道如何开始)。

_{(1) 我所说的“最佳”是指“最容易以编程方式处理”(相对于 TTF/OTF)}

Answer 1

我相当确定 Highcharts 不以与 PNG 相同的方式支持 SVG(即仅提供 URL)。

Highcharts Renderer 对象支持使用 VML(矢量标记语言)的 SVG 路径数组，参见 http://api.highcharts.com/highcharts#Renderer.path .

我认为要实现您的目标，您需要打开天气图标 SVG 文件(手动或通过 JavaScript)并将每个图标的路径复制到一个可以从函数调用返回的数组中。

这other answer on SO提供了为 Highcharts 创建自定义加号图标的指南，进一步解释了我在上面描述的内容。

如果您查看 SVG 文件的原始内容，您会注意到一堆这样的节点:

<glyph unicode="&#xf014;" horiz-adv-x="2641" d="M0 86q0 39 27 65t67 26h1991q40 0 65.5 -25.5t25.5 -65.5q0 -37 -26.5 -62t-64.5 -25h-1991q-40 0 -67 25t-27 62zM279 421q0 39 28 64q24 24 63 24h1992q37 0 62 -25.5t25 -62.5q0 -38 -25 -64.5t-62 -26.5h-1992q-38 0 -64.5 27t-26.5 64zM293 675q0 -14 16 -14h153 q10 0 21 17q38 83 113.5 136t165.5 60l59 8q18 0 18 19l7 53q17 173 146.5 288.5t303.5 115.5q173 0 301.5 -114t146.5 -286l8 -61q0 -18 21 -18h170q103 0 187.5 -55t125.5 -146q11 -17 22 -17h153q19 0 15 24q-47 164 -186 268t-317 104h-34q-53 213 -223.5 348.5 t-389.5 135.5q-224 0 -398 -140.5t-223 -358.5q-136 -32 -238.5 -129t-142.5 -232v4q-1 -3 -1 -10zM465 -241q0 38 28 63q24 24 64 24h1993q38 0 64.5 -25t26.5 -62q0 -38 -27 -65t-64 -27h-1993q-37 0 -64.5 27.5t-27.5 64.5z" />

unicode 属性描述正在绘制哪个图标，d 属性是一长串路径，必须拆分成一个数组。

我将把用 JavaScript 加载和解析 SVG 文件的工作留给您。我猜想使用 jQuery 或特定 SVG 之类的库相当容易。