c3.js - c3图表，里面有一个c3图形的工具提示

Question

我有一个c3.js线图表示2个值的演变。我需要线图的工具提示是饼图（tooltip =另一个c3.js图）。

这里是我的成功：

http://jsfiddle.net/owhxgaqm/80/

// c3 - custom tooltip 
function generateGraph(data1,data2) { 
console.log(data1.name + '\t' + data1.value + '\t' + data2.name + '\t' + data2.value); 
var chart1 = c3.generate(
      { 
       bindto: "#t", 
       data: {columns : [[data1.name, data1.value],[data2.name, data2.value]], 
        type : 'pie'}   
      }); 
} 
var chart = c3.generate({ 
    data: { 
     columns: [ 
      ['data1', 1000, 200, 150, 300, 200], 
      ['data2', 400, 500, 250, 700, 300], ] 
    }, 
    tooltip: { 
     contents: function (d, defaultTitleFormat, defaultValueFormat, color) { 
       generateGraph(d[0], d[1]); 
      var divt = document.getElementById("t"); 
      return ''; 


     } 
    } 
}); 

正如你可以看到我绑定“工具提示”与已经存在的div所以这是不是真的是我从C3希望。 JS。

任何想法是值得欢迎的。

谢谢。

Answer 1

添加内C3工具提示

图表您可以使用C3已经有提示的元素。在你的内容函数中调用generateGraph函数（见下一步）。除了数据之外，还传入this.tooltip中的工具提示元素。

... 
    tooltip: { 
     contents: function (d) { 
      // this creates a chart inside the tooltips 
      var content = generateGraph(this.tooltip, d[0], d[1]) 
      // we don't return anything - see .html function below 
     } 
    } 
    ... 

---

你generateGraph功能基本上会在您的提示元素的C3图（bindto支持D3元素）。我们做一些优化（如果数据相同，图表不会重新创建）和清理（当一个图表重建被摧毁，并从DOM移除）

function generateGraph(tooltip, data1, data2) { 
    // if the data is same as before don't regenrate the graph - this avoids flicker 
    if (tooltip.data1 && 
     (tooltip.data1.name === data1.name) && (tooltip.data1.value === data1.value) && 
     (tooltip.data2.name === data2.name) && (tooltip.data2.value === data2.value)) 
     return; 
    tooltip.data1 = data1; 
    tooltip.data2 = data2; 

    // remove the existing chart 
    if (tooltip.chart) { 
     tooltip.chart = tooltip.chart.destroy(); 
     tooltip.selectAll('*').remove(); 
    } 

    // create new chart 
    tooltip.chart = c3.generate({ 
     bindto: tooltip, 
     size: { 
      width: 200, 
      height: 200 
     }, 
     data: { 
      columns: [[data1.name, data1.value], [data2.name, data2.value]], 
      type: 'pie' 
     } 
    }); 
    // creating a chart on an element sets its position attribute to relative 
    // reset it to absolute (the tooltip was absolute originally) for proper positioning 
    tooltip.style('position', 'absolute'); 
} 

请注意，我们设置图表大小所以它更像是工具提示内容而不是子图。

---

的最后一位是有点哈克 - 因为C3要求我们树立了HTML（这是我们不希望这样做），因为我们没有任何其他的回调，我们可以很容易地拴住到后内容处理程序，我们必须禁用C3用来设置工具提示中的HTML内容的功能（这只会影响该图表的提示），即.tooltip.html

// MONKEY PATCHING (MAY break if library updates change the code that sets tooltip content) 
// we override the html function for the tooltip to not do anything (since we've already created the tooltip content inside it) 
chart.internal.tooltip.html = function() { 
    // this needs to return the tooltip - it's used for positioning the tooltip 
    return chart.internal.tooltip; 
} 

---

小提琴 - http://jsfiddle.net/muuqvf1a/

---

工具提示定位

而不是使用C3的工具提示的定位，你也可以的大小和在图表底部的工具提示立场。只是风格.c3-tooltip-container。

替代

注意，也c3分别支持subcharts（http://c3js.org/reference.html#subchart-show），并data.mouseover（http://c3js.org/reference.html#data-onmouseover），它也可能是一个更清洁的途径值得探讨。