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），它也可能是一個更清潔的途徑值得探討。