0

我正在尝试使用 fusioncharts API 的瀑布图。我想禁用图表的悬停属性。在这里，您可以看到悬停在“可变成本”列上显示“可变成本，$-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"
    }
]
  }

您还可以在以下链接中查看数据和配置。 瀑布图

请建议 fusioncharts API 方式（如果可能）禁用悬停属性。也欢迎其他方式的解决方案。

4

1 回答 1

0

只需通过向元素添加 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，您可以更改它以匹配您的 div。

!important在css中使用是因为元素具有内联样式pointer-events并且它在规则中具有优先级，因此覆盖我使用的内联属性优先级!important

另请注意pointer-events:none，将删除所有鼠标事件，包括单击、悬停、鼠标输入、鼠标退出等。

于 2016-11-21T14:00:36.030 回答