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

Question

我正在使用 canvas.js java 脚本库来可视化我的 data.Here 我正在使用 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 shown in 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>

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

How to create drill down chart in canvas.js?

javascript

jquery

charts

canvasjs

我需要什么

我试过的