在掛起的svg圖表後添加一個漸變

你好我正在用Plotly創建圖表，並希望我的區域圖表具有漸變而不是不透明的標準填充。在掛起的svg圖表後添加一個漸變

我建立使用我的圖表：

Plotly.newPlot(className, chartData, layout, {displayModeBar: showModeBar});

當圖表是建立圍繞該圖表的DOM看起來像這樣：

然後後，我創建使用此代碼的梯度部分：

function createGradient() { 
    var svg = document.getElementById('line-chart-impressions').getElementsByClassName('trace')[0]; 
    var fillChange = document.getElementById('line-chart-impressions').getElementsByClassName('js-tozero')[0]; 

    var defs = document.createElement('defs'); 
    var linearGradient = document.createElement('linearGradient'); 
    linearGradient.setAttribute('id', 'gradient'); 

    var stop1 = document.createElement('stop'); 
    stop1.setAttribute("offset", "5%"); 
    stop1.setAttribute("stop-color", "#FFC338"); 

    var stop2 = document.createElement('stop'); 
    stop2.setAttribute("offset", "100%"); 
    stop2.setAttribute("stop-color", "#FFEA68"); 

    svg.appendChild(defs); 
    defs.appendChild(linearGradient); 
    linearGradient.appendChild(stop1); 
    linearGradient.appendChild(stop2); 

    fillChange.setAttribute('fill', 'url(#gradient)'); 
}

之後，dom看起來像：

我懷疑這是因爲我後來追加漸變，但我真的想知道是否有解決方案。我的圖表沒有這樣的填充。

來源

2017-10-12 jasper

你實際上沒有問一個問題。問題是什麼？我們可以假設你的漸變沒有顯示出來嗎？ –

您的漸變定義缺少定位信息。從哪裏到哪裏應該漸變？例如，爲了定義一個梯度，可讓從底部顏色變化到圖表區域的頂部：

<linearGradient id="gradient" gradientUnits="objectBoundingBox" 
       x1="0" x2="0" y1="1" y2="0"> 
    <stop offset="5%" stop-color="#FFC338" /> 
    <stop offset="100%" stop-color="#FFEA68" /> 
</linearGradient>

X1，Y1，X2，Y2定義一條線的開始和結束沿其逐漸改變顏色。要着色的區域中的每個點將獲得該線上距離它最近的點的顏色。

您可以表示相對於該區域的邊界框（這是默認設置，因此gradientUnits="objectBoundingBox"可以保留）的座標，也可以用gradientUnits="userSpaceOnUse"來表示用戶空間座標。閱讀進一步的調整here。

從你的截圖看來你禁用了style屬性與開發工具。請注意，表示屬性fill="url(#gradient)"的特異性比style="fill:rgb(255, 255, 255);"低。您應該使用

fillChange.style.fill = "url(#gradient)"

，以確保Style獲取應用。

的屏幕截圖顯示的元素lineargradient（注意小寫字母）。正如您發佈的腳本所定義的，它必須是linearGradient。檢查你真的執行了什麼。

來源

2017-10-12 17:19:09 ccprog

在掛起的svg圖表後添加一個漸變

回答

相關問題