Question

鉴于我的数据名称可能超长，我想在用户悬停数据名称时实现工具提示，但是，我找不到任何有关向生成的数据名称html添加自定义标记的文档。可以添加类但不添加数据标记。

实施例

在这种情况下，数据名称太长了。工具提示将是完美的。

Answer 1

好的我明白了你想要的东西：）

我们可以在c3.generate调用中使用一些额外的函数并稍微扩展库，这将为您提供更多灵活性。只需在oninit函数中定义长标签。

这是jsFiddle，将鼠标悬停在图例上以查看： https://jsfiddle.net/abacaj90/6v2tpft2/14/

function insertAfter(referenceNode, newNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

function legendFollowMouse(e) {
  var x = e[0];
  var y = e[1];
    return {
    x: x - 50 + 'px',
    y: y + 20 + 'px'
  }
}

function createLegendTooltip() {
    var svg = this.svg[0][0];
    var frag = document.createDocumentFragment();
    var div = document.createElement('div');
    var span = document.createElement('span');
    div.className = 'c3-legend-tooltip-container';
    span.className = 'c3-legend-tooltip';

    div.appendChild(span);
    frag.appendChild(div);
    insertAfter(svg, frag);

    this.legendHoverNode = span;
}

function generateLegendHoverLabels(labels) {
  createLegendTooltip.call(this);
  var obj = {};
  this.data.targets.map(function(data, i) { 
     if(typeof labels[i] !== 'undefined') {
        obj[data.id] = data.id + ': ' + labels[i];
     }
  })
  return obj;
}


var chart = c3.generate({
  data: {
    columns: [
      ['data1', 30, 200, 100, 400, 150, 250],
      ['data2', 20, 180, 240, 100, 190, 250],
      ['data3', 20, 180, 240, 100, 190, 250]
    ],
  },
  oninit: function() {
    // declare your extra long labels here
    var legendLongLabels = ['long content here, data3 doesnt have a tooltip!','even longer content here, you can style me with css!'];

    this.legendHoverContent = generateLegendHoverLabels.call(this, legendLongLabels);
  },
  legend: {
    item: {
      onmouseover: function (id) {
         // keep default behavior as well as our tooltip
         d3.select(this.svg[0][0]).classed('c3-legend-item-focused', true);

         if (!this.transiting && this.isTargetToShow(id)) {
           this.api.focus(id);
         }

         // if we defined the long labels, display them
         if (this.legendHoverContent.hasOwnProperty(id)) {
             var coords = legendFollowMouse(d3.mouse(this.svg[0][0]))
             this.legendHoverNode.parentNode.style.display = 'block';
             this.legendHoverNode.parentNode.style.top = coords.y;
             this.legendHoverNode.parentNode.style.left = coords.x;
             this.legendHoverNode.innerHTML = this.legendHoverContent[id];
         }
      },
      onmouseout: function (id) {
        // keep default behavior as well
        d3.select(this.svg[0][0]).classed('c3-legend-item-focused', false);
        this.api.revert();

        // just hide the tooltips
        this.legendHoverNode.parentNode.style.display = 'none';
      }
    }
  }
});

Answer 2

等待更好的事情时，

临时回答：

这是使用输入数据。

var data = {
"data": [{
    "A": "1075.000000",
    "date": "01-03-2016"
}, {
    "A": "878.571429",
    "date": "01-04-2016"
}, {
    "A": "485.000000",
    "date": "04-03-2016"
}, {
    "A": "795.000000",
    "date": "05-03-2016"
}, {
    "A": "620.000000",
    "date": "06-03-2016"
}, {
    "A": "957.500000",
    "date": "07-03-2016"
}, {
    "name": "H1W",
    "A": "990.000000"
}, {
    "A": "950.000000",
    "date": "09-03-2016"
}, {
    "A": "680.000000",
    "date": "10-03-2016"
}, {
    "A": "1000.000000",
    "date": "17-03-2016"
}, {
    "A": "535.000000",
    "date": "18-02-2016"
}],
"name": "A",
"namePlus": {
    "location": "B or C or D or E",
    "vars": {
        "sizes": "Sizes: 2 or 3 or 5",
        "unitSizes": "Units Amount: (0 to 2) or (3 to 5)"
    }
}}

这是我处理输入的方式

var tooltip = "<ul><li>" + data.name + "</li><li>" + data.namePlus.location + "</li>";
$.each(data.namePlus.vars, function (key, value) {
    tooltip += "<li>" + value + "</li>";
 });
 tooltip += "</ul>";

c3.generate({
            bindto: '#lineChart',
            data: {
                json: data.data,
                keys: {
                    x: 'date',
                    value: [data.name]
                },
                xFormat: '%d-%m-%Y',
                classes: {
                    value: 'HEY'
                }
            });

            $(".c3-legend-item-" + data.name).mouseover(function (e) {
                $(".myTooltip").html(tooltip).css({visibility: "visible"});
            });
            $(".c3-legend-item-" + data.name).mouseleave(function (e) {
                $(".myTooltip").html(tooltip).css({visibility: "hidden"});
            });

这是实际的css

.myTooltip {
background-color: black;
border-radius: 6px;
color: #fff;
font-size: 12px;
height: 25px;
margin: auto;
opacity: 0.68;
padding: 5px 0;
position: relative;
text-align: center;
top: 14px;
visibility: hidden;
width: 50%;}

数据名称添加数据html标记

2 个答案: