Question

我的应用程序中有2个圆环图，我想知道是否有可能在中间空白处显示文本，因为我将鼠标悬停在圆环图的不同部分上。例如，两个图表都有不同的颜色，每个图表都有自己的百分比。因此，例如，如果我将鼠标悬停在图表的某种颜色上，我希望在中间显示一个文本。我想知道最好的方法是什么，因为我对css非常糟糕，如果有更好的方法，我不想做一个简单的悬停。此外，如果我们没有悬停在图表上，则不应显示任何文本。

这是我的代码

var chart = c3.generate({
    bindto: "#chart",
    data: {
        columns: [
            ['rat', 30],
            ['bat', 50],
        ],
        type : 'donut'

    },
       legend: {
        show: false
    },       


});


var chart = c3.generate({
    bindto: "#chart1",
       size: {
        height: 200,
        width: 450
    },
    data: {
        columns: [
            ['cat', 50],
            ['mat', 50],
        ],
        type : 'donut'

    },
      legend: {
        show: false
    },


});

这是我的FIDDLE

Answer 1

根据reference，您可以将onmouseover和onmouseout处理程序指定为c3.generate，这也会在参数中获取光标下的元素，然后您可以显示/隐藏某些中心的文字，例如：http://jsfiddle.net/Lccmvysr/1/

将鼠标悬停在图表的不同部分上时显示文字

1 个答案: