我正在努力在Highcharts中获得一些自定义符号。我目前正在遵循规范:
marker: {
symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
}
但是,这需要网络调用,我试图通过预缓存图像来避免网络调用。
var sun = new Image();
sun.src = 'https://www.highcharts.com/samples/graphics/sun.png'
正如预期的那样,这段代码预先加载了图片(如Chrome开发者控制台的网络选项卡所示),但当我加载图形时,同样的url再次加载。我猜测这是Highchart库特有的。
我还尝试直接将符号值设置为像symbol: sun
这样的图像,但没有成功。
我想知道还有其他的方法。也许把本Map像转换成一个blob,然后把它设置为符号的值?我会尝试,但也欢迎其他的想法。
2条答案
按热度按时间xeufq47z1#
我找到了答案。原来我们可以只把图像转换成base 64,然后把它设置为symbol。而不是100 - 800 ms的加载时间,我得到了大约〈100微秒。
pxy2qtax2#
谢谢@ BowenYang,是的,base64可以工作。转换https://elmah.io/tools/base64-image-encoder/上的图像,然后将CSS用法中的代码复制到highchart符号。