물 차트의 융합 차트에서 호버 속성을 해제하는 방법

Question

융합 차트의 API 차트를 사용하려고합니다. 차트의 호버링 속성을 비활성화하려고합니다. 여기서 당신은 "Variable Costs"에 "on Variable Costs, $ -156K"라고 표시된 호버링을 볼 수 있습니다.

것은 내가 사용하고 몇 가지 다음과 같은 구성 -

 { 
"chart": { 
    "caption": "Total Profit Calculation", 
    "subcaption": "Last month", 
    "yAxisname": "Amount (In USD)", 
    "numberprefix": "$", 
    "connectordashed": "1", 
    "sumlabel": "Total {br} Profit", 
    "positiveColor": "#6baa01", 
    "negativeColor": "#e44a00", 
    "paletteColors": "#0075c2,#1aaf5d,#f2c500", 
    "baseFontColor": "#333333", 
    "baseFont": "Helvetica Neue,Arial", 
    "captionFontSize": "14", 
    "subcaptionFontSize": "14", 
    "subcaptionFontBold": "0", 
    "showBorder": "0", 
    "bgColor": "#ffffff", 
    "showShadow": "0", 
    "canvasBgColor": "#ffffff", 
    "canvasBorderAlpha": "0", 
    "divlineAlpha": "100", 
    "divlineColor": "#999999", 
    "divlineThickness": "1", 
    "divLineDashed": "1", 
    "divLineDashLen": "1", 
    "usePlotGradientColor": "0", 
    "showplotborder": "0", 
    "showXAxisLine": "1", 
    "xAxisLineThickness": "1", 
    "xAxisLineColor": "#999999", 
    "showAlternateHGridColor": "0" 
}, 
"data": [ 
    { 
     "label": "Online sales", 
     "value": "420000" 
    }, 
    { 
     "label": "Store Sales", 
     "value": "710000" 
    }, 
    { 
     "label": "Total Sales", 
     "issum": "1" 
    }, 
    { 
     "label": "Fixed Costs", 
     "value": "-250000" 
    }, 
    { 
     "label": "Variable Costs", 
     "value": "-156000" 
    }, 
    { 
     "label": "COGS", 
     "value": "-310000" 
    }, 
    { 
     "label": "Promotion Costs", 
     "value": "-86000" 
    }, 
    { 
     "label": "Total Costs", 
     "issum": "1", 
     "cumulative": "0" 
    } 
] 
    } 

또한 다음 링크에서 데이터와 설정을 확인할 수 있습니다. Waterfall Chart

온훅 속성을 사용하지 않으려면 fusioncharts API 방법 (가능한 경우)을 제안하십시오. 다른 방법으로 해결할 수도 있습니다.

Answer 1

요소에 CSS 규칙을 추가하여 마우스 오버 이벤트를 사용 중지하면됩니다.

jQuery를 해결

$('div#chart-container-1 rect').css('pointer-events','none'); 

CSS 솔루션

div#chart-container-1 rect { 
    pointer-events: none !important; 
} 

참고 : provied 링크에서 차트를 감싸는 부모 DIV의 ID가 chart-container-1했다, 당신은 그것을 변경할 수 있습니다 귀하의 div에 맞게. 요소가 pointer-events에 대한 인라인 스타일을하고 규칙에 우선합니다, 그래서 포함한 모든 마우스 이벤트를 제거합니다 나는 또한 pointer-events:none주의

!important을 사용하고 있습니다 인라인 속성의 우선 순위를 무시하기 때문에

!important

는 CSS에서 사용되는 클릭, 마우스 오버, mousein, mouseout 등.