Question

我想在我的图表中使用Weather Icons作为标记，但最好将^（1）用作CSS：

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

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

docs for plotOptions.series.marker.symbol（也在上面的演示中引用）提到可以将SVG用于标记。天气图标还包含SVG version。 有没有办法使用它们？（我不知道如何开始）。

_{（1）by＆＃34; best＆＃34;我的意思是最容易以编程方式处理＆＃34; （与TTF / OTF相反）}

Answer 1

我非常确定Highcharts不像PNG那样支持SVG（即只提供URL）。

Highcharts Renderer对象使用VML（矢量标记语言）支持一组SVG路径，请参阅http://api.highcharts.com/highcharts#Renderer.path。

我认为要实现您的目标，您需要打开Weather Icons 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的东西相当容易。

Answer 2

由于使用SVG数据远非明显（@Quantastical答案显示路径）我最终直接格式化标签并删除标记：

plotOptions: {
            series: {
                animation: false,
                marker: {
                    enabled: false
                },
                dataLabels: {
                    enabled: true,
                    verticalAlign: 'middle',
                    useHTML: true,
                    formatter: function () {
                        return  formatLabel(this);
                    }
                }
            }
        }

formatLabel返回要显示的原始HTML。然后可以使用CSS进行定制。

如何使用现有的SVG符号（在文件中）作为highcharts中的标记？

2 个答案: