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

【问题标题】：Add custom parameter to info.contentsFunction将自定义参数添加到 info.contentsFunction
【发布时间】：2017-11-21 21:40:43
【问题描述】：

我需要能够向 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)
}

...其中“i”是图表的索引。

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

示例：如果用户将鼠标悬停在 chart2 中的某个切片上，我想将“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 的位置。

【问题讨论】：

标签： javascript zoomcharts

【解决方案1】：

已解决。我只是像这样将“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;
}

我担心向图表数据添加自定义字段会破坏图表（我相信我在使用其他库时遇到过这种情况）。所以，你去吧。

【讨论】：