如何向Google圖表添加自定義背景

Question

Google 在其結果中引入了一個股票圖表 ，突出顯示了“下班后”：

我在文檔中四處搜尋，我看不到任何明顯的東西可以建議如何實現類似的效果（即使線條標記會更改顏色）。 我發現的最接近的是這個jsfiddle（asgallant / apH2B /），它顯示水平分區-但不會改變線條的顏色。

有沒有人對如何達到這種效果有任何建議？

Answer 1

我設法通過在圖表頂部生成一個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-index並通過它在封面框的頂部生成它。

最后， 完成小提琴 。