具有沿线的梯度的高图面积范围图
具有沿线的梯度的高图面积范围图
提问于 2013-02-08 20:56:00
以下是具有梯度的区域范围图。
http://jsfiddle.net/gXpHH/1/
我想要做的是让梯度沿着曲线，这样沿着底线的任何一点的颜色都是一样的，当它到达顶端的时候，它会以相同的颜色结束。我非常肯定，这是目前的选择，但我只是想看看是否有人遇到过这种情况。下面是当前生成梯度的代码：
series: [{
name: "Shade",
fillColor: {
linearGradient: [0, 0, 0, 300],
stops: [
[0, "#4572A7"],
[1, "rgba(2,0,0,0)"]
]
},
data: [
[0, 14733, 18890],
[1, 16583, 21642],
//... rest here
[10, 42417, 61955]
]
}]谢谢
注意事项：这与渐变填线图(高图)不一样，因为我需要梯度来跟踪曲线
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-02-14 14:29:32
困难在于粒度:高海图为系列的点绘制一个SVG路径，并将该路径与梯度相关联。但是，如果您的系列数据是相对线性的，那么下面的近似可能是有用的。见我创造的小提琴
假设您的系列数据不是静态的，我的演示包括两个系列和一个函数，每个系列都试图动态创建与您的需求最接近的linearGradient：
function getLinearGradient(series) {
var lastY0=null, lastY1=null, maxY0=null, maxY1=null;
$.each(series.data, function(key,value) {
maxY0 = Math.max(value[1],maxY0);
maxY1 = Math.max(value[2],maxY1);
lastY0 = value[1];
lastY1 = value[2];
});
var firstY0 = series.data[0][2],
firstY1 = series.data[0][2]
;
var minY0=maxY0, minY1=maxY1;
$.each(series.data, function(key,value) {
minY0 = Math.min(value[1],minY0);
minY1 = Math.min(value[2],minY1);
});
var minY = minY0,
maxY = maxY1,
heightY = maxY - minY
;
var gradient = {
x1: 10 + ( ((firstY0-minY) / heightY) * 80 ) + "%",
y1: "10%",
x2: 10 + ( ((lastY1-minY) / heightY) * 80 ) + "%",
y2: "90%"
};
return gradient;
};当然，这种方法不是一个成熟的解决方案，只有在处理近似于线性曲线的数据时才有用。这是小提琴
Stack Overflow用户
发布于 2013-02-12 16:56:44
我没有任何示例，也不确定它是否已经在规范中，但我非常确定实现此效果的唯一方法是使用svg混合梯度。
您可以使用路径点作为混合矩阵的边界点，并获得所需的效果。
有关进一步信息，请参见这里。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14781214
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号