Question

需要帮助C3.js圆环图在悬停时显示自定义标题，下面是我的代码片段：

function LegislationWiseOP(Table) {
        //var mData = [], mItem = [], mMinorIdData = [], mMinorIdItem = [], mTotalCnt = 0;//COmmented by Nadeem on 06Oct17
        var mData = [], mItem = [], mMinorIdData = [], mMinorIdItem = [], mTotalCnt = 0, mMinorNameFull = [];//Added by Nadeem on 06Oct17


        if (Table[0] == null)//Added by Nadeem on 29May17
            mTotalCnt = 0;
        else
            mTotalCnt = Table[0].TotCnt;

        $('#LegWiseOpenProcTotal').text(mTotalCnt);


        for (var i = 0; i < Table.length; i++) {
            mItem = [], mMinorIdItem = [];

            mItem.push(Table[i].MinorName, Table[i].Perc);
            mData.push(mItem);
            //alert(Table[i].MinorNameFull);
            mMinorNameFull.push(Table[i].MinorNameFull);//Added by Nadeem on 06Oct17

            mMinorIdItem.push(id = Table[i].MinorName, value = Table[i].MinorId);

            mMinorIdData.push(mMinorIdItem);
        }

        var chart = c3.generate({
            bindto: '#chart2',
            data: {
                columns: mData,
                type: 'donut',
                onclick: function (d, i) {
                    for (var i = 0; i < mMinorIdData.length; i++) {
                        if (mMinorIdData[i][0] == d.id)
                            openRadWindow("LegWisePenProc", "", mMinorIdData[i][1], "", mMinorIdData[i][0], "");
                    }
                },
            },
            color: {
                pattern: ['#336799', '#01A3AE', '#80D1D5', '#FEE506', '#2C973D']
            },
            legend: {
                position: 'right',
            },
            donut: {
                title: ""
            },tooltip: {
                format: {
                    title:
                        function (d, i) {
                            for (var i = 0; i < mMinorNameFull.length; i++) {
                                return mMinorNameFull[i];
                            }
                            //function (d) { return alert(d); 'Data ' + mMinorNameFull[d]; }
                        }
                }
            }


});
        }

我也尝试了这个 - ＆gt; tried this 如果我遗漏了什么，请指导我，我的主要要求是在圆环图上显示短名称，并在悬停标题显示全长文本，该文本存在于mMinorNameFull数组中。

Answer 1

已经很晚了，但对其他人来说会有所帮助。您可以像这样使用tooltip：

var chart = c3.generate({
                data: {
                    // data configurations
                },
                donut: {
                    // donut configurations
                },
                tooltip: {
                    format: {
                        value: function (value, ratio, id) {
                            return value;
                        }
                    }
                }
            });

悬停时c3js自定义标题

1 个答案: