Question

我有c3.js库，我正在尝试重现＆＃34; mouseover＆＃34;生成的图表中特定区域的所有点上的动画。为了说清楚，我想要的是下一张图片：

正如您所看到的，工具提示是＆＃34;未分组＆＃34;，但是当鼠标位于4点的公共区域上时，它们都会被触发。并且这些工具提示显然不遵循鼠标指针。

以下是图片中图表的一些细节：

有两种类型的视觉数据，＆＃34; spline＆＃34;和＆＃34; bar＆＃34;
＆＃34; bar＆＃34;的工具提示无论如何，数据总是显示在顶部。

我希望拥有完全相同的动画，包括：

＆＃34; bar＆＃34;顶部的日期工具提示（Fr，7月28日）
＆＃34; bar＆＃34;工具尖端始终位于其他工具尖端（4）
悬停动画上的白色虚线（否则不显示）
鼠标悬停在公共区域时的所有其他工具提示。

这是我到目前为止所做的：

var chart = c3.generate({
        "bindto": "#chart",
        "data": {
            "columns": [
                ["def", 0],
                ["AAA", "0.00", "0.00", "33.33", "28.57", "28.57", "25.00", "25.00", "30.77"],
                ["BBB", "50.00", "33.33", "42.86", "42.86", "30.00", "28.57", "35.29", "35.29"],
                ["CCC", "33.33", "25.54", "37.64", "33.33", "33.33", "33.33", "25.00", "15.15"],
                ["IMP", "50", "49", "65", "20", "38", "17", "44", "30"]
            ],
            "types": {
                "def": "line",
                "AAA": "spline",
                "BBB": "spline",
                "CCC": "spline", "IMP": "bar"
            },
            "axes": {"IMP": "y2"}
        },
        "size": {
            "height": 360
        },
        "color": {
            "pattern": ["transparent", "#01d8dd", "#ff6400", "#ff56d5", "#808080"]
        },
        "tooltip": {
            "grouped": false,
            "format": {}
        },
        "grid": {
            "y": {
                "show": true
            }
        },
        "axis": {
            "x": {
                "type": "category",
                "categories": ["02", "03", "04", "05", "06", "07", "08", "09"]
            },
            "y": {
                "max": 50,
                "padding": 3,
                "label": {
                    "text": "PERCENTAGE",
                    "position": "outer-middle"
                }
            },
            "y2": {
                "show": true,
                "max": 90,
                "label": {
                    "text": "IMPRESSIONS",
                    "position": "outer-middle"
                }
            }
        },
        "point": {
            "r": 3
        }});

JS fiddle

感谢

Answer 1

正如我在评论中所说，您希望列表最终成为c3.js之外的一个非常自定义的实现。这是一个快速刺激它，让你去：

<!DOCTYPE html>
<html>

<head>
  <link data-require="c3.js@0.4.11" data-semver="0.4.11" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.css" />
  <script data-require="c3.js@0.4.11" data-semver="0.4.11" src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.js"></script>
  <script data-require="d3@3.5.17" data-semver="3.5.17" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>

</head>

<body>
  <div id="chart"></div>
  <script>
    var chart = c3.generate({
      "bindto": "#chart",
      "data": {
        "columns": [
          ["def", 0],
          ["AAA", "0.00", "0.00", "33.33", "28.57", "28.57", "25.00", "25.00", "30.77"],
          ["BBB", "50.00", "33.33", "42.86", "42.86", "30.00", "28.57", "35.29", "35.29"],
          ["CCC", "33.33", "25.54", "37.64", "33.33", "33.33", "33.33", "25.00", "15.15"],
          ["IMP", "50", "49", "65", "20", "38", "17", "44", "30"],
          ["IMP", "50", "49", "65", "20", "38", "17", "44", "30"],
          ["IMP", "50", "49", "65", "20", "38", "17", "44", "30"],
          ["IMP", "50", "49", "65", "20", "38", "17", "44", "30"],
          ["IMP", "50", "49", "65", "20", "38", "17", "44", "30"],
          ["IMP", "50", "49", "65", "20", "38", "17", "44", "30"],
          ["IMP", "50", "49", "65", "20", "38", "17", "44", "30"],
          ["IMP", "50", "49", "65", "20", "38", "17", "44", "30"]
        ],
        "types": {
          "def": "line",
          "AAA": "spline",
          "BBB": "spline",
          "CCC": "spline",
          "IMP": "bar"
        },
        "axes": {
          "IMP": "y2"
        },
        "onmouseover": customOver,
        "onmouseout": customOut
      },
      "size": {
        "height": 360
      },
      "color": {
        "pattern": ["transparent", "#01d8dd", "#ff6400", "#ff56d5", "#808080"]
      },
      "tooltip": {
        "show": false
      },
      "grid": {
        "y": {
          "show": true
        }
      },
      "axis": {
        "x": {
          "type": "category",
          "categories": ["02", "03", "04", "05", "06", "07", "08", "09"]
        },
        "y": {
          "max": 50,
          "padding": 3,
          "label": {
            "text": "PERCENTAGE",
            "position": "outer-middle"
          }
        },
        "y2": {
          "show": true,
          "max": 90,
          "label": {
            "text": "IMPRESSIONS",
            "position": "outer-middle"
          }
        }
      },
      "point": {
        "r": 3
      }
    });
    
    function customOver(d,i){
      var xScale = this.internal.x,
          yScale1 = this.internal.y,
          yScale2 = this.internal.y2,
          g = this.internal.main;
          
      if (d.id == "IMP"){
        
        g.append('path')
          .attr('class', 'tip-line')
          .attr('d', 'M' + xScale(d.x) + ',0L' + xScale(d.x) + ',' + this.internal.height)
          .style('stroke-dasharray', '5, 5');
        
        var t = g.append('g')
          .attr('class', 'tooltip')
          .attr('transform', 'translate(' + xScale(d.x) + ',' + 5 + ')');
        
        t.append('rect')
          .attr('rx', 5)
          .attr('width', 50)
          .attr('height', 20)
          .attr('x', -25)
          .style('fill','#555');

        t.append('text')
          .text(d.x)
          .style('text-anchor', 'middle')
          .style('fill', 'white')
          .attr('dy', '1.3em')

      } else {
        
        var t = g.append('g')
          .attr('class', 'tooltip')
          .attr('transform', 'translate(' + xScale(d.x) + ',' + yScale1(d.value) + ')');
        
        t.append('rect')
          .attr('rx', 5)
          .attr('width', 50)
          .attr('height', 20)
          .attr('x', -50)
          .attr('y', -10)
          .style('fill','#555');

        t.append('text')
          .text(d.value)
          .style('text-anchor', 'end')
          .style('fill', 'white')
          .attr('dx', '-10')
          .attr('dy', '0.5em')
      }
    }
    
    function customOut(){
      d3.selectAll('.tooltip').remove();
      d3.select('.tip-line').remove();
    }
    
  </script>
</body>

</html>

C3.js自定义工具提示动画onmouseover

1 个答案: