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这些类名来选择它们并操纵它们的不透明度。

首先，我们使用mouseenter选择器将mouseleave和.amcharts-graph-bullet事件附加到项目符号。然后我们找出子弹所属的图表（图表添加了通用类名称，如amcharts-graph-bullet和基于id的类名称，如amcharts-graph-g2。

然后我们可以定位特定图形的线条，以将不透明度（或更确切地说stroke-opacity属性，因为常规CSS在SVG中的工作方式不同）到特定图形的线部分。

请注意，他的方法在旧的IE浏览器（IE8和更低版本）中根本不起作用，因为它们不支持SVG。

这是一张工作图表：

＆＃13;

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);
});

＆＃13;

<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>

＆＃13;

这里the same chart on CodePen。

Bullet在mouseHover amChart上通过具有相同颜色的线连接

1 个答案: