javascript - 如何在canvas.js中创建钻取图表？

Question

我使用canvas.js java脚本库来可视化我的数据。这里我使用rangeSplineArea图表来区分低绩效者和高绩效者数据。

我需要什么

现在，当我单击每个节点时，我需要另一个图表来显示该特定数据(向下钻取图表)。

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

我尝试过的

$(文档).ready(函数(){

    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];
        }
    }
});

Answer 1

使用Drilldown Example显示于 CanvasJS Gallery ，您可以根据自己的需求进行修改。

var totalVisitors = 883000;
var chartData = {
	"BaseChart": [{
		click: baseChartDrilldownHandler,
		cursor: "pointer",
		explodeOnClick: false,
		innerRadius: "75%",
		legendMarkerType: "square",
		name: "BaseChart",
     type: "rangeSplineArea",
    fillOpacity: 0.2,
    color: "#ff1000",
    indexLabelFormatter: formatter,
    indexLabelFontColor: "white",
		dataPoints: [
		  { label: "hostility", y: [15, 26], name: "hostility" },
      { 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" }
		]
	}],
	"hostility": [{
		color: "#E7823A",
		name: "hostility",
		type: "column",
		dataPoints: [
			{ x: new Date("1 Jan 2015"), y: 33000 },
			{ x: new Date("1 Feb 2015"), y: 35960 },
			{ x: new Date("1 Mar 2015"), y: 42160 },
			{ x: new Date("1 Apr 2015"), y: 42240 },
			{ x: new Date("1 May 2015"), y: 43200 },
			{ x: new Date("1 Jun 2015"), y: 40600 },
			{ x: new Date("1 Jul 2015"), y: 42560 },
			{ x: new Date("1 Aug 2015"), y: 44280 },
			{ x: new Date("1 Sep 2015"), y: 44800 },
			{ x: new Date("1 Oct 2015"), y: 48720 },
			{ x: new Date("1 Nov 2015"), y: 50840 },
			{ x: new Date("1 Dec 2015"), y: 51600 }
		]
	}],
	"anger": [{
		color: "#546BC1",
		name: "anger",
		type: "column",
		dataPoints: [
			{ x: new Date("1 Jan 2015"), y: 22000 },
			{ x: new Date("1 Feb 2015"), y: 26040 },
			{ x: new Date("1 Mar 2015"), y: 25840 },
			{ x: new Date("1 Apr 2015"), y: 23760 },
			{ x: new Date("1 May 2015"), y: 28800 },
			{ x: new Date("1 Jun 2015"), y: 29400 },
			{ x: new Date("1 Jul 2015"), y: 33440 },
			{ x: new Date("1 Aug 2015"), y: 37720 },
			{ x: new Date("1 Sep 2015"), y: 35200 },
			{ x: new Date("1 Oct 2015"), y: 35280 },
			{ x: new Date("1 Nov 2015"), y: 31160 },
			{ x: new Date("1 Dec 2015"), y: 34400 }
		]
	}],
	"disliking": [{
		color: "#E7823A",
		name: "disliking",
		type: "column",
		dataPoints: [
			{ x: new Date("1 Jan 2015"), y: 33000 },
			{ x: new Date("1 Feb 2015"), y: 35960 },
			{ x: new Date("1 Mar 2015"), y: 42160 },
			{ x: new Date("1 Apr 2015"), y: 42240 },
			{ x: new Date("1 May 2015"), y: 43200 },
			{ x: new Date("1 Jun 2015"), y: 40600 },
			{ x: new Date("1 Jul 2015"), y: 42560 },
			{ x: new Date("1 Aug 2015"), y: 44280 },
			{ x: new Date("1 Sep 2015"), y: 44800 },
			{ x: new Date("1 Oct 2015"), y: 48720 },
			{ x: new Date("1 Nov 2015"), y: 50840 },
			{ x: new Date("1 Dec 2015"), y: 51600 }
		]
	}],
	"egoism": [{
		color: "#546BC1",
		name: "egoism",
		type: "column",
		dataPoints: [
			{ x: new Date("1 Jan 2015"), y: 22000 },
			{ x: new Date("1 Feb 2015"), y: 26040 },
			{ x: new Date("1 Mar 2015"), y: 25840 },
			{ x: new Date("1 Apr 2015"), y: 23760 },
			{ x: new Date("1 May 2015"), y: 28800 },
			{ x: new Date("1 Jun 2015"), y: 29400 },
			{ x: new Date("1 Jul 2015"), y: 33440 },
			{ x: new Date("1 Aug 2015"), y: 37720 },
			{ x: new Date("1 Sep 2015"), y: 35200 },
			{ x: new Date("1 Oct 2015"), y: 35280 },
			{ x: new Date("1 Nov 2015"), y: 31160 },
			{ x: new Date("1 Dec 2015"), y: 34400 }
		]
	}],
	"dominance": [{
		color: "#546BC1",
		name: "dominance",
		type: "column",
		dataPoints: [
			{ x: new Date("1 Jan 2015"), y: 22000 },
			{ x: new Date("1 Feb 2015"), y: 26040 },
			{ x: new Date("1 Mar 2015"), y: 25840 },
			{ x: new Date("1 Apr 2015"), y: 23760 },
			{ x: new Date("1 May 2015"), y: 28800 },
			{ x: new Date("1 Jun 2015"), y: 29400 },
			{ x: new Date("1 Jul 2015"), y: 33440 },
			{ x: new Date("1 Aug 2015"), y: 37720 },
			{ x: new Date("1 Sep 2015"), y: 35200 },
			{ x: new Date("1 Oct 2015"), y: 35280 },
			{ x: new Date("1 Nov 2015"), y: 31160 },
			{ x: new Date("1 Dec 2015"), y: 34400 }
		]
	}],
	"unhappiness": [{
		color: "#E7823A",
		name: "unhappiness",
		type: "column",
		dataPoints: [
			{ x: new Date("1 Jan 2015"), y: 33000 },
			{ x: new Date("1 Feb 2015"), y: 35960 },
			{ x: new Date("1 Mar 2015"), y: 42160 },
			{ x: new Date("1 Apr 2015"), y: 42240 },
			{ x: new Date("1 May 2015"), y: 43200 },
			{ x: new Date("1 Jun 2015"), y: 40600 },
			{ x: new Date("1 Jul 2015"), y: 42560 },
			{ x: new Date("1 Aug 2015"), y: 44280 },
			{ x: new Date("1 Sep 2015"), y: 44800 },
			{ x: new Date("1 Oct 2015"), y: 48720 },
			{ x: new Date("1 Nov 2015"), y: 50840 },
			{ x: new Date("1 Dec 2015"), y: 51600 }
		]
	}],
	"loneliness": [{
		color: "#546BC1",
		name: "loneliness",
		type: "column",
		dataPoints: [
			{ x: new Date("1 Jan 2015"), y: 22000 },
			{ x: new Date("1 Feb 2015"), y: 26040 },
			{ x: new Date("1 Mar 2015"), y: 25840 },
			{ x: new Date("1 Apr 2015"), y: 23760 },
			{ x: new Date("1 May 2015"), y: 28800 },
			{ x: new Date("1 Jun 2015"), y: 29400 },
			{ x: new Date("1 Jul 2015"), y: 33440 },
			{ x: new Date("1 Aug 2015"), y: 37720 },
			{ x: new Date("1 Sep 2015"), y: 35200 },
			{ x: new Date("1 Oct 2015"), y: 35280 },
			{ x: new Date("1 Nov 2015"), y: 31160 },
			{ x: new Date("1 Dec 2015"), y: 34400 }
		]
	}]
};

var baseChartOptions = {
	animationEnabled: true,
	theme: "light2",
	title: {
		text: "New VS Returning Visitors"
	},
	subtitles: [{
		text: "Click on Any Data-Point to Drilldown",
		backgroundColor: "#2eacd1",
		fontSize: 16,
		fontColor: "white",
		padding: 5
	}],
	legend: {
		fontFamily: "calibri",
		fontSize: 14,
		itemTextFormatter: function (e) {
			return e.dataPoint.name + ": " + Math.round(e.dataPoint.y / totalVisitors * 100) + "%";  
		}
	},
	data: []
};

var drillDownChartOptions = {
	animationEnabled: true,
	theme: "light2",
	axisX: {
		labelFontColor: "#717171",
		lineColor: "#a2a2a2",
		tickColor: "#a2a2a2"
	},
	axisY: {
		gridThickness: 0,
		includeZero: false,
		labelFontColor: "#717171",
		lineColor: "#a2a2a2",
		tickColor: "#a2a2a2",
		lineThickness: 1
	},
	data: []
};

var chart = new CanvasJS.Chart("chartContainer", baseChartOptions);
chart.options.data = chartData["BaseChart"];
chart.render();

function baseChartDrilldownHandler(e) {
	chart = new CanvasJS.Chart("chartContainer", drillDownChartOptions);
	chart.options.data = chartData[e.dataPoint.name];
	chart.options.title = { text: e.dataPoint.name }
	chart.render();
	$("#backButton").toggleClass("invisible");
}

$("#backButton").click(function() { 
	$(this).toggleClass("invisible");
	chart = new CanvasJS.Chart("chartContainer", baseChartOptions);
	chart.options.data = chartData["BaseChart"];
	chart.render();
});

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];
  }
}

  #backButton {
	border-radius: 4px;
	padding: 8px;
	border: none;
	font-size: 16px;
	background-color: #2eacd1;
	color: white;
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
  }
  .invisible {
    display: none;
  }

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<div id="chartContainer" style="height: 260px; width: 100%;"></div>
<button class="btn invisible" id="backButton"><- Back</button>