鼠标悬停 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 在图表中启用 class 个名称。启用后，图表会将 class 名称附加到各种图表元素，例如项目符号、线条等。

我们将使用那些 class 名称 jQuery 到 select 他们并操纵他们的不透明度。

首先，我们使用 .amcharts-graph-bullet selector 将 mouseenter 和 mouseleave 事件附加到项目符号。然后我们找出子弹属于哪个图表（图表添加了通用 class 名称，如 amcharts-graph-bullet 和基于 id 的 class 名称，如 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。

鼠标悬停 amChart 上的项目符号通过具有相同颜色的线连接

Bullet connect by line having same color on mousehover amChart

javascript

jquery

amcharts