Question

我设法在堆积柱形图中实现该功能，当我将鼠标悬停在连接在一起的众多堆栈中的一个上时，不透明度会发生变化。

我所追求的是减少所有其他筹码的不透明度，除了我悬停的筹码。

 /*
 *      Graph opacity
 */

 function setOpacity(graph, opacity) {
        var className = "amcharts-graph-" + graph.id;
        var items = document.getElementsByClassName(className);
        if (undefined === items)
            return;
        for (var x in items) {
            if ("object" !== typeof items[x])
                continue;
            var path = items[x].getElementsByTagName("path")[ 0 ];
            if (undefined !== path)
                path.style.fillOpacity = opacity;
        }
    }

/*
 *      Handle hover event
 */
function addOnHoverListner(chartObj) {
    chartObj.timeout;
    chartObj.addListener("rollOverGraph", function (event) {
        setOpacity(event.graph, 0.5);
    });
    chartObj.addListener("rollOutGraph", function (event) {
        setOpacity(event.graph, 1);
    });

    chartObj.addListener("init", function () {
        chartObj.categoryAxis.addListener("clickItem", function (event) {
            //alert("clicked axis label");
        });
    });
}

这可能吗？我可以请求指导。

Answer 1

可以轻松修改上述代码来执行此操作。而不仅仅是增加图表的不透明度。只需循环浏览图表中的所有，并降低它们的不透明度，除了当前正在悬停的那些：

chart.addListener( "rollOverGraph", function( event ) {
  var chart = event.chart;
  for(var i = 0; i < chart.graphs.length; i++) {
    setOpacity( chart.graphs[i] , event.graph === chart.graphs[i] ? 1 : 0.5 );
  }

} );
chart.addListener( "rollOutGraph", function( event ) {
  var chart = event.chart;
  for(var i = 0; i < chart.graphs.length; i++) {
    setOpacity( chart.graphs[i] , 1 );
  }
} );

这里是working example。

Amcharts - 堆积柱/饼图 - 减少其他堆/馅饼的不透明度

1 个答案: