将自定义参数添加到info.contentsFunction

时间:2017-11-21 21:40:43

标签: javascript zoomcharts

我需要能够在Zoomcharts中的pie.info.contentsFunction中添加一些自定义信息。我在页面上有多个图表,每个图表都是这样创建的......

       var pc = new PieChart({
            pie: {
                innerRadius: 0.5,
            },
            container: chartContainer1,
            area: { height: 500 },
            data:chartData,
            toolbar: {
                "fullscreen": true,
                "enabled": true
            },
            info: {
                contentsFunction: boomChartTT
            }
        });

在" boomChartTT"功能我需要知道正在徘徊的图表。我希望能够做到这样的事情......

info: {
 contentsFunction: boomChartTT(i)
}    

...其中'我'是图表的索引。

我需要知道图表索引的原因是因为我在每个图表的索引数组中保存了一些其他数据。图表的索引与数据的索引匹配。

示例:如果用户悬停在图表2中的切片上,我想要传递' 2'到boomChartTT函数,这样我就可以访问该图表的总数据(比如,totalsData [2])。

我过去曾与其他图表库一起完成此操作,只需在图表容器中添加数据属性即可为我提供索引......

<div id="chartContainer1" data-index="1"></div>

...然后我可以从悬停功能(contentsFunction)访问chartContainer,然后获取该索引。

我不想将总计数据添加到实际的图表数据中,因为我必须将它添加到每个冗余的切片中。

有办法做到这一点吗?

如果我的帖子不清楚,请告诉我。

已编辑添加: 我不认为这很重要,但这里是boomChartTT功能:

function boomChartTT(data,slice){
    var tt="<div class=\"charttooltip\">";
    if(data.name==="Others" || data.name==="Previous"){return tt+=data.name+"</div>";}
    //var thisData=dataSearch(totalsData[i],"REFERRINGSITE",data.id);
    tt+="<h5 class=\"strong\">"+data.id+"</h5>"+oHoverTable.render(thisData)+"</div>";
    return tt;
}

注释行是我需要索引(i)才能获得正确的totalsData。

1 个答案:

答案 0 :(得分:0)

解决。我只是简单地将“chartIndex”添加到数据中......

        for(var i=0;i<r.length;i++){
            var thisDataObj ={
                id:r[i].REFERRINGSITE,
                value:r[i].PCTOFSALES,
                name:r[i].REFERRINGSITE,
                chartIndex: arguments[1],//<----- arguments[1] is the chart index
                style: { expandable: false, fillColor: dataSearch(dataRSList,"REFERRINGSITE",r[i].REFERRINGSITE)[0].COLOR }
            };
            chartData.preloaded.subvalues.push(thisDataObj);
        }

然后在boomChartTT函数中......

function boomChartTT(data,slice){
    var tt="<div class=\"charttooltip\">";
    if(data.name==="Others" || data.name==="Previous"){return tt+=data.name+"</div>";}
    var thisData=dataSearch(totalsData[data.chartIndex-1],"REFERRINGSITE",data.id);
    tt+="<h5 class=\"strong\">"+data.id+"</h5>"+oHoverTable.render(thisData)+"</div>";
    return tt;
}

我担心在图表数据中添加自定义字段会破坏图表(我相信我对其他图书馆有经验)。那么,你去吧。