apend 차트 뒤에 그라디언트 추가

Question

안녕하세요 저는 Plotly로 차트를 만들고 표준 차트 대신 불투명도로 그라디언트를 표시하고 싶습니다.

내가 사용하여 내 그래프 구축 :

그런 다음 그 후 나는이 코드를 사용하여 그라데이션 섹션을 만들 :

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은 같이 보인다 :

나는 그래디언트를 나중에 추가하기 때문에 의심 스럽지만 솔루션이 있는지 정말 알고 싶습니다. 내 차트에는 이와 같은 채우기가 없습니다.

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이어야합니다. 실제로 실행 한 것을 확인하십시오.