如何在瀑布图的融合图中禁用悬停 属性
How to disable hover property in fusion charts of water fall chart
我正在尝试使用 fusioncharts 的瀑布图 API。
我想禁用图表的悬停 属性。在这里您可以看到悬停时它在 "Variable Costs" 列上显示 "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"
}
]
}
您还可以在下面link查看数据和配置。
Waterfall Chart
请建议 fusioncharts API 方式(如果可能)禁用悬停 属性。也欢迎其他方式的解决方案。
只需向元素添加 css 规则即可禁用悬停事件。
Jquery 解决方案
$('div#chart-container-1 rect').css('pointer-events','none');
CSS解决方案
div#chart-container-1 rect {
pointer-events: none !important;
}
注意:chart-container-1
是父 div 的 ID,它将图表包装在您提供的 link 中,您可以更改它以匹配您的 div。
!important
用于 css 因为元素有内联样式 pointer-events
并且它在规则中具有优先级,所以覆盖内联 属性 优先级 I使用过 !important
另请注意pointer-events:none
将删除所有鼠标事件,包括单击、悬停、鼠标输入、鼠标移出等。
我正在尝试使用 fusioncharts 的瀑布图 API。 我想禁用图表的悬停 属性。在这里您可以看到悬停时它在 "Variable Costs" 列上显示 "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"
}
]
}
您还可以在下面link查看数据和配置。 Waterfall Chart
请建议 fusioncharts API 方式(如果可能)禁用悬停 属性。也欢迎其他方式的解决方案。
只需向元素添加 css 规则即可禁用悬停事件。
Jquery 解决方案
$('div#chart-container-1 rect').css('pointer-events','none');
CSS解决方案
div#chart-container-1 rect {
pointer-events: none !important;
}
注意:chart-container-1
是父 div 的 ID,它将图表包装在您提供的 link 中,您可以更改它以匹配您的 div。
!important
用于 css 因为元素有内联样式 pointer-events
并且它在规则中具有优先级,所以覆盖内联 属性 优先级 I使用过 !important
另请注意pointer-events:none
将删除所有鼠标事件,包括单击、悬停、鼠标输入、鼠标移出等。