子彈連接按鼠標懸停上相同顏色的線amChart

Question

我想在鼠標懸停上按行連接所有相同顏色的子彈。在正常情況下，我只想顯示小子彈。當有人鼠標懸停時，他們通過線路相互連接。

   var chart = AmCharts.makeChart("chartdiv", { 
      "type": "serial", 
      "theme": "light", 
      "dataProvider": [{ 
       "x": 1, 
       "aaa": 2, 
       "bbb": 4, 
      }, { 
       "x": 2, 
       "aaa": 1.1, 
       "bbb": 5, 
      }], 
      "valueAxes": [ { 
       "maximum": 6, 
       "minimum": 0, 
       } ], 
      "startDuration": 0.5, 
      "graphs": [{ 
       "id": "g1", 
       "balloonText": "aaa[[category]]: [[value]]", 
       "bullet": "round", 
       "title": "aaa", 
       "valueField": "aaa", 
       "color": "#000000", 
       "lineAlpha": 1, 
      }, { 
       "id": "g2", 
       "balloonText": "bbb [[category]]: [[value]]", 
       "bullet": "round", 
       "title": "bbb", 
       "valueField": "bbb", 
       "color": "#000000", 
       "lineAlpha": 1, 
      }], 
      "categoryField": "x", 
       "categoryAxis": { 
       "gridPosition": "start", 
       "position": "left", 
       } 
      }); 

Answer 1

由於您使用jQuery標記了問題，因此我將提供使用它的解決方案。沒有它，解決方案會變得更加複雜。

該解決方案本身依賴於通過使用addClassNames來啓用圖表中的類名稱。啓用後，圖表會將類名稱附加到各種圖表元素，如項目符號，線條等。

我們將使用這些類別名稱與jQuery來選擇它們並操縱它們的不透明度。

首先，我們使用.amcharts-graph-bullet選擇器將mouseenter和mouseleave事件附加到項目符號。然後，我們找到了子彈屬於哪個圖（圖增加了兩個泛型類的名稱，如amcharts-graph-bullet和基於ID類的名稱，如amcharts-graph-g2。

然後我們就可以針對特定的圖線，應用不透明性（或者說stroke-opacity屬性，因爲常規的CSS在SVG中的工作方式不同）到特定圖的線部分

請注意，他的方法在舊IE瀏覽器（IE8和以下）中根本不起作用，因爲它們不支持SVG。

這是一個工作圖表：

var chart = AmCharts.makeChart("chartdiv", { 
 
    "type": "serial", 
 
    "theme": "light", 
 
    "addClassNames": true, 
 
    "dataProvider": [{ 
 
    "x": 1, 
 
    "aaa": 2, 
 
    "bbb": 4, 
 
    }, { 
 
    "x": 2, 
 
    "aaa": 1.1, 
 
    "bbb": 5, 
 
    }], 
 
    "valueAxes": [{ 
 
    "maximum": 6, 
 
    "minimum": 0, 
 
    }], 
 
    "startDuration": 0.5, 
 
    "graphs": [{ 
 
    "id": "g1", 
 
    "balloonText": "aaa[[category]]: [[value]]", 
 
    "bullet": "round", 
 
    "bulletSize": 20, 
 
    "title": "aaa", 
 
    "valueField": "aaa", 
 
    "color": "#000000", 
 
    "lineAlpha": 0, 
 
    "lineThickness": 3 
 
    }, { 
 
    "id": "g2", 
 
    "balloonText": "bbb [[category]]: [[value]]", 
 
    "bullet": "round", 
 
    "bulletSize": 20, 
 
    "title": "bbb", 
 
    "valueField": "bbb", 
 
    "color": "#000000", 
 
    "lineAlpha": 0, 
 
    "lineThickness": 3 
 
    }], 
 
    "categoryField": "x", 
 
    "categoryAxis": { 
 
    "gridPosition": "start", 
 
    "position": "left", 
 
    } 
 
}); 
 

 
/** 
 
* Add events 
 
*/ 
 
$("#chartdiv").on("mouseenter mouseleave", ".amcharts-graph-bullet", function(e) { 
 
    
 
    // find out graph id 
 
    var graphClass = $(this).closest("g.amcharts-graph-line").attr("class").split(" ").pop(); 
 
    
 
    // figure the opacity based on event type 
 
    var opacity = e.type === "mouseenter" ? 1 : 0; 
 
    
 
    // set opacity of the related lines 
 
    $("." + graphClass +" .amcharts-graph-stroke").attr("stroke-opacity", opacity); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script> 
 
<script src="http://www.amcharts.com/lib/3/serial.js"></script> 
 
<script src="http://www.amcharts.com/lib/3/themes/light.js"></script> 
 
<div id="chartdiv" style="width: 100%; height: 300px;"></div>

而這裏的the same chart on CodePen。