如何在瀑布图融合图中禁用悬停特性

Question

我正在尝试使用汇总图API的瀑布图。我想禁用图表的悬停属性。在这里，您可以看到它在“可变成本”列上显示“可变成本，$-156 k”。

​

​

我使用了以下一些配置-

      {
"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"
    }
]
  }

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

如果可能的话，请建议使用汇编语言API的方式来禁用“悬停”属性.其他解决办法也是受欢迎的。

Answer 1

只需将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。

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

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