Question

我正在使用c3库绘制图表。

当我们将鼠标悬停在c3.js中的圆环图标题上时，有人可以建议我如何将值的总和作为鼠标移动事件（请不要将图表的工具提示视为图片，其中甜甜圈的标题，我要求总和就像工具提示一样）

例如：

var chart = c3.generate({
    data: {
        columns: [
            ['Monday', 70],
            ['TuesDay', 20],
            ['Wednesday', 30],
            ['Thursday', 50],
            ['Friday', 100]
        ],
        type: 'donut'
    },
    donut: {
        title: "Title" 
    }
});

在上面的例子中，总数是270，我想在圆环图的标题上显示270作为鼠标。

提前致谢!!

Answer 1

初始化图表时，您可以设置鼠标悬停处理程序：

var chart = c3.generate({
    oninit: function() {
        var total = this
            .config
            .data_columns
            .reduce(function(sum, item) {
                return sum += item[1]
            }, 0)

        this
            .selectChart
            .select('.c3-chart-arcs-title')
            .on('mouseover', function() {
                alert(total) // replace with desired tooltip code
            })
    },
    ...

然后您可以创建所需的任何工具提示。如果要重复c3工具提示的样式，请尝试检查 .c3-tooltip-container 元素。

请参阅this fiddle

C3.js显示鼠标悬停在圆环图标题上时的值总和

1 个答案: