我正在探索Highcharts,它似乎是一个非常全面的软件包!我有一个关于图例颜色的问题。
我注意到,当我对线条使用线性颜色渐变时,图例旁边的颜色(我相信它被称为symbolColor)可能会显示,也可能不会显示,这取决于我使用的格式:
1) symbolColor works fine: linearGradient: [ 00, 00, 00, 350 ]
2) symbolColor doesn't show up: linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }
我宁愿使用第二种格式;第一个没有React。
symbolColor是否应该一直显示,这是一个不清楚的问题/bug?还是我做错了什么?我还注意到,如果在系列的plotOptions中启用了标记,symbolColor可以很好地使用第二种格式。但我有很多数据点,不想使用标记。
小提琴图有两条线--紫色和绿色--虽然使用方法(1)得到的紫色symbolColor看起来很好,但您会注意到使用方法(2)得到的绿色symbolColor没有显示。
https://jsfiddle.net/jwinkle/s6d9ah17/6/
3条答案
按热度按时间xa9qqrwz1#
在HTML文件中,添加:
在图表代码上方添加:
修复的方法是在路径定义中添加一个smidge(您可以通过进入dev工具中的svg path元素并将'd'属性中的最后一个数字更改为float来测试这一点:
变为:
上面的函数遍历每个序列,并在正确的位置添加小数值。完全破解。但是,如果行确实有这个小数值,为什么它不出现,我不知道。我也会在浏览器上测试它,看看它是否工作一致,因为它可能没有(我在Chrome中测试)。
下面是一个与此相关的问题,我在此修改了该问题:https://www.highcharts.com/forum/viewtopic.php?t=38588(它的大部分是解决一个完全不同的问题,但图例线确实出现了,所以我调查了原因)。
如果不想使用额外的库,可以编写一个本地js函数来查找图例行,并以同样的方式操作它们。
ffx8fchx2#
Here,您可以找到该问题的一个很好的解释。
差异的原因在于,如果渐变定义为数组,则Highcharts使用
'userSpaceOnUse'
作为gradientUnits
的默认值。Highcharts source code:
作为一种可能的解决方案,您可以将
gradientUnits
也设置为定义为对象的linearGradient
:现场演示:http://jsfiddle.net/BlackLabel/yz6sagxj/
或者稍微修改路径,使其不完全水平
现场演示:http://jsfiddle.net/BlackLabel/L1kzg0cn/
Github执行绪:https://github.com/highcharts/highcharts/issues/1936
n6lpvg4x3#
除了“凯瑟琳的解决方案”,我还发现了另一个解决方案。
如果我在一个系列中启用标记(将半径设置为0),然后将数据放入链接到前一个系列的第二个系列中,它就可以工作了。(如果我在一个系列中完成所有这些操作,则同样没有图例颜色。)
下面是“固定”的小提琴:https://jsfiddle.net/jwinkle/wztq78n1/6/
我向Highcharts报告了最初的问题,认为这是一个可能的bug,他们确认这是一个他们无法控制的SVG渲染问题。