Javascript 如何在谷歌图表中添加自定义背景

谷歌推出了一款强调“下班后”的广告：

我已经在文档中搜寻过了，但我看不到任何明显的建议如何达到类似的效果（甚至线条标记也会改变颜色）。我发现的最接近的是这个JSFIDLE（asgallant/apH2B/），它显示了水平分区，但不会改变线条的颜色

---

有人对如何实现这一效果有什么建议吗？

我通过在图表的顶部生成一个div（带绝对位置）来实现这一效果。还编写了一些javascript来重新绘制图表，并在选定的时间间隔内添加一条灰线

输入功能：

function updateShader() {
    // gets the entered values from the fields
    var start = Math.round(parseInt(document.getElementById('startPos').value))
    var width = Math.round(parseInt(document.getElementById('interval').value))

    // draws the chart again with the entered filters
    drawBasic(start, width);

    //converts the entered values to ISH pixels    
    start = Math.round(start * 5.125)
    width = Math.round(width * 5.125)

    // special case when start = end point, so it will be grey on a little on both sides
    if (start == width) {
        start = start + 69
    } else {
        start = start + 73
    }
    // changes the "cover-box" to fit the entered values
    document.getElementById('cover').style.marginLeft = start + "px";
    document.getElementById('cover').style.width = width - start + 73 + "px";
}

以及封面盒的CSS：

#cover {
    position:absolute;
    width:0px;
    height:124px;
    margin-top:38px;
    margin-left:73px;
    pointer-events:none;
    background: rgba(0, 0, 0, 0.5);
    z-index:2;
}

有一些缺陷，比如允许在图表外绘制“封面”框，但总体而言，这种解决方案是可行的。也许再加上一些用户输入检查

我还将工具提示更改为HTML，这样我就可以更改它的z索引，并通过它在封面框的顶部生成它

最后