填充两条线之间的区域
Fill area between two lines
对于这样一个基本问题深表歉意。是否可以填充两条线之间的区域?
例如,我有历史 high/low 温度数据。我想在这两个时间序列之间创建一个阴影区域。
我试过像这样使用折线图的面积特征:
return [
{
values: tsData.normal,
key: 'Historical Normal',
classed: 'dashed'
},
{
area: true,
values: tsData.hi,
key: 'Historical Max',
color: '#0000ff'
},
{
area: true,
values: tsData.low,
key: 'Historical Min',
color: '#ffffff',
fillOpacity: 1
}
];
生成此图像的结果:
请注意,历史最小值线下方的网格线被填充区域隐藏了。这个解决方案有点古怪和丑陋。有更直接的方法吗?
我通过使用 d3 绘制区域获得了更好的解决方案。
首先,我创建了一个合并 tsData.hi 和 tsData.low 的数组(我称为 areaData)。对于我推送的每个数据点,例如:
{x:"The x value", y0:"The y value from tsData.hi", y1:"The y value from tsData.low"}
然后我根据图表的比例定义了 x 和 y 比例:
var x = chart.xScale();
var y = chart.yScale();
然后我添加了一个区域定义为
var area = d3.svg.area()
.x(function (d) { return x(d.x); })
.y0(function (d) { return y(d.y0); })
.y1(function (d) { return y(d.y1); });
接下来我使用以下方法绘制区域:
d3.select('.nv-linesWrap')
.append("path")
.datum(areaData)
.attr("class", "area")
.attr("d", area)
.style("fill", "#AEC7E8")
.style("opacity", .2);
这实现了更好看的解决方案。因为 nvd3 在调整 window 大小时更新图表。我将区域的绘图包装在一个函数中。这样我就可以在 window 调整大小时调用该函数,同时删除先前绘制的区域,如下所示:
var drawArea = function () {
d3.select(".area").remove();
d3.select('.nv-linesWrap')
.append("path")
.datum(areaData)
.attr("class", "forecastArea")
.attr("d", area)
.style("fill", "#AEC7E8")
.style("opacity", .2);
}
drawArea();
nv.utils.windowResize(resize);
function resize() {
chart.update();
drawArea();
}
我还禁用了使用图例打开和关闭系列的功能,因为我没有处理这种情况:
chart.legend.updateState(false);
结果:
对于这样一个基本问题深表歉意。是否可以填充两条线之间的区域?
例如,我有历史 high/low 温度数据。我想在这两个时间序列之间创建一个阴影区域。
我试过像这样使用折线图的面积特征:
return [
{
values: tsData.normal,
key: 'Historical Normal',
classed: 'dashed'
},
{
area: true,
values: tsData.hi,
key: 'Historical Max',
color: '#0000ff'
},
{
area: true,
values: tsData.low,
key: 'Historical Min',
color: '#ffffff',
fillOpacity: 1
}
];
生成此图像的结果:
请注意,历史最小值线下方的网格线被填充区域隐藏了。这个解决方案有点古怪和丑陋。有更直接的方法吗?
我通过使用 d3 绘制区域获得了更好的解决方案。
首先,我创建了一个合并 tsData.hi 和 tsData.low 的数组(我称为 areaData)。对于我推送的每个数据点,例如: {x:"The x value", y0:"The y value from tsData.hi", y1:"The y value from tsData.low"}
然后我根据图表的比例定义了 x 和 y 比例:
var x = chart.xScale();
var y = chart.yScale();
然后我添加了一个区域定义为
var area = d3.svg.area()
.x(function (d) { return x(d.x); })
.y0(function (d) { return y(d.y0); })
.y1(function (d) { return y(d.y1); });
接下来我使用以下方法绘制区域:
d3.select('.nv-linesWrap')
.append("path")
.datum(areaData)
.attr("class", "area")
.attr("d", area)
.style("fill", "#AEC7E8")
.style("opacity", .2);
这实现了更好看的解决方案。因为 nvd3 在调整 window 大小时更新图表。我将区域的绘图包装在一个函数中。这样我就可以在 window 调整大小时调用该函数,同时删除先前绘制的区域,如下所示:
var drawArea = function () {
d3.select(".area").remove();
d3.select('.nv-linesWrap')
.append("path")
.datum(areaData)
.attr("class", "forecastArea")
.attr("d", area)
.style("fill", "#AEC7E8")
.style("opacity", .2);
}
drawArea();
nv.utils.windowResize(resize);
function resize() {
chart.update();
drawArea();
}
我还禁用了使用图例打开和关闭系列的功能,因为我没有处理这种情况:
chart.legend.updateState(false);
结果: