Javascript 如何在canvas.js中创建向下钻取图表？

我使用canvas.js java脚本库来可视化我的数据。在这里，我使用RangeSLingeArea图表来区分低性能和高性能数据

我需要什么 现在，当我单击每个节点时，我需要一个用于该特定数据的另一个图表（向下钻取图表）

我查看了canvas.js文档，但无法理解该文档

我试过的 $（文档）.ready（函数（）{

var chart=new CanvasJS.chart（“chartContainer”{
标题：{
文本：“情感的共性”，
fontFamily：“喧嚣之光”，
fontColor:“白色”，
},
背景颜色：“rgba（255255,0.0）”，
回答：是的，
axisY：{
包括：错，
labelFontColor:“白色”，
最高限额：40，
网格厚度：0
},
axisX：{
labelFontColor:“白色”，
},
工具提示：{
分享：是的，
内容：“{name}
情感：
L:{y[0]}，H:{y[1]}”
},
数据：[{
类型：“rangeSplineArea”，
填充不透明度：0.2，
颜色：“ff1000”，
indexLabelFormatter:格式化程序，
indexLabelFontColor:“白色”，
数据点：[
{标签：“敌意”，y:[15,26]，名称：“敌意”，颜色：“白色”}，
{标签：“愤怒”，y:[15,27]，名字：“愤怒”}，
{标签：“不喜欢”，y:[13,27]，名称：“不喜欢”}，
{标签：“利己主义”，y:[14,27]，名字：“利己主义”}，
{标签：“支配地位”，y:[15,26]，名称：“支配地位”}，
{标签：“不快乐”，y:[17,26]，名字：“不快乐”}，
{标签：“孤独”，y:[16,27]，名字：“孤独”}
]
}]
});
chart.render（）；
var图像=[]；
附加图像（图表）；
函数附加图像（图表）{
对于（var i=0；i

使用中显示的，您可以根据需要进行修改

var totalVisitors=883000；
var图表数据={
“基线图”：[{
单击：baseChartDrilldownHandler，
光标：“指针”，
explodeOnClick:false，
内半径：“75%”，
legendMarkerType:“方形”，
名称：“基线图”，
类型：“rangeSplineArea”，
填充不透明度：0.2，
颜色：“ff1000”，
indexLabelFormatter:格式化程序，
indexLabelFontColor:“白色”，
数据点：[
{标签：“敌意”，y:[15,26]，名称：“敌意”}，
{标签：“愤怒”，y:[15,27]，名字：“愤怒”}，
{标签：“不喜欢”，y:[13,27]，名称：“不喜欢”}，
{标签：“利己主义”，y:[14,27]，名字：“利己主义”}，
{标签：“支配地位”，y:[15,26]，名称：“支配地位”}，
{标签：“不快乐”，y:[17,26]，名字：“不快乐”}，
{标签：“孤独”，y:[16,27]，名字：“孤独”}
]
}],
“敌意”：[{
颜色：“E7823A”，
名称：“敌意”，
键入：“列”，
数据点：[
{x:新日期（“2015年1月1日”），y:33000}，
{x:新日期（“2015年2月1日”），y:35960}，
{x:新日期（“2015年3月1日”），y:42160}，
{x:新日期（“2015年4月1日”），y:42240}，
{x:新日期（“2015年5月1日”），y:43200}，
{x:新日期（“2015年6月1日”），y:40600}，
{x:新日期（“2015年7月1日”），y:42560}，
{x:新日期（“2015年8月1日”），y:44280}，
{x:新日期（“2015年9月1日”），y:44800}，
{x:新日期（“2015年10月1日”），y:48720}，
{x:新日期（“2015年11月1日”），y:50840}，
{x:新日期（“2015年12月1日”），y:51600}
]
}],
“愤怒”：[{
颜色：“546BC1”，
名字：“愤怒”，
键入：“列”，
数据点：[
{x:新日期（“2015年1月1日”），y:22000}，
{x:新日期（“2015年2月1日”），y:26040}，
{x:新日期（“2015年3月1日”），y:25840}，
{x:新日期（“2015年4月1日”），y:23760}，
{x:新日期（“2015年5月1日”），y:28800}，
{x:新日期（“2015年6月1日”），y:29400}，
{x:新日期（“2015年7月1日”），y:33440}，
{x:新日期（“2015年8月1日”），y:37720}，
{x:新日期（“2015年9月1日”），y:35200}，
{x:新日期（“2015年10月1日”），y:35280}，
{x:新日期（“2015年11月1日”），y:31160}，
{x:新日期（“2015年12月1日”），y:34400}
]
}],
“不喜欢”：[{
颜色：“E7823A”，
名称：“不喜欢”，
键入：“列”，
数据点：[
{x:新日期（“2015年1月1日”），y:33000}，
{x:新日期（“2015年2月1日”），y:35960}，
{x:新日期（“2015年3月1日”），y:42160}，
{x:新日期（“2015年4月1日”），y:42240}，
{x:新日期（“2015年5月1日”），y:43200}，
{x:新日期（“2015年6月1日”），
    var chart = new CanvasJS.Chart("chartContainer", {
        title: {
            text: "Commonality Of Emotions",
            fontFamily: "DIN-Light",
            fontColor: "white",

        },
        backgroundColor: "rgba(255,255,255,0.0)",
        responsive:true,


        axisY: {
            includeZero: false,
            labelFontColor: "white",
            maximum: 40,
            gridThickness: 0
        },
        axisX: {
            labelFontColor: "white",
        },
        toolTip: {
            shared: true,
            content: "{name} </br> <strong>Emotion: </strong> </br> L: {y[0]} , H: {y[1]} "
        },
        data: [{
            type: "rangeSplineArea",
            fillOpacity: 0.2,
            color: "#ff1000",
            indexLabelFormatter: formatter,
            indexLabelFontColor: "white",
            dataPoints: [
                { label: "hostility", y: [15, 26], name: "hostility", color: "white" },
                { label: "anger", y: [15, 27], name: "anger" },
                { label: "disliking", y: [13, 27], name: "disliking" },
                { label: "egoism", y: [14, 27], name: "egoism" },
                { label: "dominance", y: [15, 26], name: "dominance" },
                { label: "unhappiness", y: [17, 26], name: "unhappiness" },
                { label: "loneliness", y: [16, 27], name: "loneliness" }
            ]
        }]
    });
    chart.render();

    var images = [];

    addImages(chart);

    function addImages(chart) {
        for (var i = 0; i < chart.data[0].dataPoints.length; i++) {
            var dpsName = chart.data[0].dataPoints[i].name;
            if (dpsName == "hostility") {
                images.push($("<img>").attr("src", "/Content/Images/CommonalityIcon/67155-200.png"));
            } else if (dpsName == "anger") {
                images.push($("<img>").attr("src", "/Content/Images/CommonalityIcon/024-business-cliparts.png"));
            } else if (dpsName == "disliking") {
                images.push($("<img>").attr("src", "/Content/Images/CommonalityIcon/e-7-new.png"));
            }
            else if (dpsName == "egoism") {
                images.push($("<img>").attr("src", "/Content/Images/CommonalityIcon/e-8.png"));
            }
            else if (dpsName == "dominance") {
                images.push($("<img>").attr("src", "/Content/Images/CommonalityIcon/neutral-d007-512.png"));
            }
            else if (dpsName == "unhappiness") {
                images.push($("<img>").attr("src", "/Content/Images/CommonalityIcon/882181-200.png"));
            }
            else if (dpsName == "loneliness") {
                images.push($("<img>").attr("src", "/Content/Images/CommonalityIcon/734983-200.png"));
            }

            images[i].attr("class", dpsName).appendTo($("#chartContainer>.canvasjs-chart-container"));
            positionImage(images[i], i);
        }
    }

    function positionImage(image, index) {
        var imageCenter = chart.axisX[0].convertValueToPixel(chart.data[0].dataPoints[index].x);
        var imageTop = chart.axisY[0].convertValueToPixel(chart.axisY[0].maximum);

        image.width("40px")
        .css({
            "left": imageCenter - 20 + "px",
            "position": "absolute", "top": imageTop + "px",
            "position": "absolute"
        });
    }



    function formatter(e) {
        if (e.index === 0 && e.dataPoint.x === 0) {
            return "LowPerformer " + e.dataPoint.y[e.index];
        } else if (e.index == 1 && e.dataPoint.x === 0) {
            return " HighPerformer " + e.dataPoint.y[e.index];
        } else {
            return e.dataPoint.y[e.index];
        }
    }
});