C3.js benutzerdefinierte Tooltip-Animation onmouseover

Ich habe die Bibliothek c3.js und ich versuche, eine "Mouseover" -Animation an allen Punkten aus einem bestimmten Bereich im generierten Diagramm zu reproduzieren. Um es klar zu machen, was ich will, ist im nächsten Bild:C3.js benutzerdefinierte Tooltip-Animation onmouseover

Wie Sie die Tooltips sehen können, sind „nicht gruppiert“, aber sie sind alle ausgelöst, wenn die Maus über das üblich ist Bereich für die 4 Punkte. und diese Tooltipps folgen offensichtlich nicht dem Mauszeiger.

hier sind einige Details über das Diagramm im Bild:

Es gibt 2 Arten von visuellen Daten, „Spline“ und „bar“
die Werkzeugspitze der „bar“ Daten immer oben angezeigt, egal was.

Ich mag genau die gleiche Animation einschließlich haben:

das Datum, an der Spitze der "bar" Werkzeugspitze (Fr, 28. Juli)
das "bar" Werkzeug Spitze immer über den anderen Werkzeugspitzen (4)
die weiße gestrichelte Linie bei Hover-Animation (wird nicht anders angezeigt)
Alle anderen Tipps, wenn die Maus über den gemeinsamen Bereich ist. Hier

ist das, was ich bisher:

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

dank

Quelle

2017-07-29 user1626498

Haben Sie versucht, Einstellung ' "Tooltip": { "gruppiert": true'? Das ist wahrscheinlich so nah, wie Sie mit 'c3' aus der Box bekommen. Alles andere wird ein sehr benutzerdefiniertes 'd3'-Hack-in sein. – Mark

Wie ich in meinem Kommentar gesagt, Sie wollen die Liste als eine sehr individuelle, um am Ende wird Implementierung erfolgt außerhalb von c3.js. Hier ist ein kurzer Stich an ihn, um Sie gehen:

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link data-require="[email protected]" data-semver="0.4.11" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.css" /> 
 
    <script data-require="[email protected]" data-semver="0.4.11" src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.js"></script> 
 
    <script data-require="[email protected]" 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>

Quelle

2017-07-30 14:44:03 Mark

Großartig! Danke vielmals – user1626498

C3.js benutzerdefinierte Tooltip-Animation onmouseover

Antwort

Verwandte Themen