グラフを作成した後にグラデーションを追加する

Question

こんにちは私はPlotlyでチャートを作成していますが、標準の塗りつぶしの代わりにグラデーションを持つようにしたいと考えています。

私が使用して私のグラフを構築する：

次に、その後、私はこのコードを使用してグラデーションセクションを作成します：

チャートは、チャートの周囲のDOMはこのようになりますビルドするとき

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

を

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は次のようになります。

私はグラデーションを後で追加するためだと思うが、解決策があるかどうか本当に知りたい。私のグラフにはこのような塗りつぶしがありません。

Answer 1

グラデーション定義に位置情報がありません。グラデーションの変更箇所はどこからですか？

<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)" 

を使用する必要があります。

このスクリーンショットは、要素lineargradient（小文字の文字）を示しています。投稿したスクリプトが定義するとおり、linearGradientである必要があります。あなたが実際に行ったことを確認してください。