Amcharts

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 - 堆叠 Column/Pie 图表 - 降低其他 stacks/pies 的不透明度

Amcharts - Stacked Column/Pie chart - Reduce opacity of other stacks/pies

javascript