Javascript c3.js-包含工具提示的c3图形，其中包含c3图形

我有一个c3.js折线图，它表示两个值的演变。我需要将折线图的工具提示设置为饼图（tooltip=另一个c3.js图）

以下是我成功的原因：

正如您所看到的，我正在将“工具提示”与一个已经存在的div绑定，因此这并不是我真正想要的c3.js

任何想法都欢迎

谢谢。

在C3工具提示中添加图表 您可以使用c3已有的工具提示元素。在contents函数中调用

generateGraph

函数（参见下一步）。除了数据外，还传入

此中可用的工具提示元素。工具提示

    ...
    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中删除）

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

---

最后一点有点不对劲-因为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;
}

---

小提琴-

---

工具提示定位

除了使用c3的工具提示定位，您还可以在图表底部调整工具提示的大小和位置。只是样式

.c3工具提示容器

备选方案

请注意，c3还支持subcharts（）和

data.mouseover

（），这也是一个值得探索的更干净的途径

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');
}

// 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;
}