我正在使用NVD3累积折线图,它非常适合我,但是我想设置不同的背景色以突出显示X轴上的某些特定小时,如下图所示。
或为特定零件的图形设置不同的背景如上所示,我要为特定时间段设置不同的X轴颜色。
因此,请告诉我执行此操作的任何可能方法或满足此要求的任何可能方法。
提前致谢。
因此,这里有很多技巧,但是您可以解析出轴的位置并自己添加:
var startTick = 1,
endTick = 3;
var x1 = parseFloat(d3.select(d3.selectAll('.nv-x .tick')[0][startTick]).attr('transform').split("(")[1]);
var x2 = parseFloat(d3.select(d3.selectAll('.nv-x .tick')[0][endTick]).attr('transform').split("(")[1]);
d3.select('.nv-y .tick')
.append('line')
.attr('x1', x1)
.attr('x2', x2)
.style('stroke', 'black')
.style('stroke-width', 10);
编辑
我只是重新考虑了这一点。您可以从图表对象找回它,而不是从DOM中解析位置。这样更清洁:
var x1 = chart.xScale()(1122782400000);
var x2 = chart.xScale()(1251691200000);
var height = chart.yAxis.range()[0];
// line on x-axis
d3.select('.nv-y .tick')
.append('line')
.attr('x1', x1)
.attr('x2', x2)
.style('stroke', 'black')
.style('stroke-width', 10);
// shaded background
d3.select('.nv-y')
.append('rect')
.attr('x', x1)
.attr('width', x2 - x1)
.style('fill', 'steelblue')
.style('opacity', 0.2)
.attr('y', 0)
.attr('height', height);
这里的例子。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句