Chart.js - Multiple Doughnut Charts on same Canvas

问题

I´m trying to simulate a multi layer doughnut chart by initializing Chart.js multiple times over same canvas. There is only one chart visible at the time. The other will be visible when you hover over its position…

Does somebody know how to make both visible at the same time?

Here is my code:

<!doctype html>
<html>
    <head>
        <title>Doughnut Chart</title>
        <script src="../Chart.js"></script>
        <style>
            body{
                padding: 0;
                margin: 0;
            }
            #canvas-holder-1{
              position: fixed;
              top: 50%;
              left: 50%;
              margin-top: -250px;
              margin-left: -250px;
            }
        </style>
    </head>
    <body>
        <div id="canvas-holder-1">
            <canvas id="chart-area" width="500" height="500"/>
        </div>
<script>

        var doughnutData = [
                {
                    value: 20,
                    color:"#F7464A",
                    highlight: "#FF5A5E",
                    label: "Red",
                },
                {
                    value: 50,
                    color: "#46BFBD",
                    highlight: "#5AD3D1",
                    label: "Green"
                },
                {
                    value: 30,
                    color: "#FDB45C",
                    highlight: "#FFC870",
                    label: "Yellow"
                },
                {
                    value: 40,
                    color: "#949FB1",
                    highlight: "#A8B3C5",
                    label: "Grey"
                },
                {
                    value: 120,
                    color: "#4D5360",
                    highlight: "#616774",
                    label: "Dark Grey"
                }

            ];
            var doughnutData2 = [
                {
                    value: 10,
                    color:"#F7464A",
                    highlight: "#FF5A5E",
                    label: "Red",
                },
                {
                    value: 100,
                    color: "#46BFBD",
                    highlight: "#5AD3D1",
                    label: "Green"
                },
                {
                    value: 20,
                    color: "#FDB45C",
                    highlight: "#FFC870",
                    label: "Yellow"
                },
                {
                    value: 60,
                    color: "#949FB1",
                    highlight: "#A8B3C5",
                    label: "Grey"
                },
                {
                    value: 120,
                    color: "#4D5360",
                    highlight: "#616774",
                    label: "Dark Grey"
                }

            ];

            window.onload = function(){
                var ctx = document.getElementById("chart-area").getContext("2d");
                window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {
                  responsive : false,
                  animateScale: false,
                  animateRotate:false,
                  animationEasing : "easeOutSine",
                  animationSteps : 80,
                  percentageInnerCutout : 90,
                });
              myDoughnut.outerRadius= 200;
                window.myDoughnut2 = new Chart(ctx).Doughnut(doughnutData2, {
                  responsive : false,
                  animateScale: false,
                  animateRotate:false,
                  animationEasing : "easeOutSine",
                  animationSteps : 80,
                  percentageInnerCutout : 90
                                  });
            };



    </script>
    </body>
</html>

Thanks, Jochen

回答1:

Have 2 canvas elements and position them one over the other using CSS. The inner canvas has the inner doughnut and has rounded borders so that it covers up as little of the outer doughnut as possible.

Preview

HTML

<div id="w">
    <canvas id="d1" height="400" width="400"></canvas>
    <canvas id="d2" height="320" width="320"></canvas>
</div>

CSS

#w {
    position: relative;
    height: 400px;
    width: 400px;
}

#d1, #d2 {
    position: absolute;
}

#d1 {
    top: 0px;
    left: 0px;
}

#d2 {
    border-radius: 150px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Fiddle - https://jsfiddle.net/rhLxawt5/

At this point we have a reasonably decent looking pie chart with non overlapping doughnuts, however our tooltips will get clipped off because they are still part of their respective canvases.

We can work around this by writing a customTooltips function to use a div instead of drawing a rectangle within the canvas.

Fiddle - https://jsfiddle.net/rca0ync3/

回答2:

You can use multiple datasets, checkout the Chart JS demo page:

http://www.chartjs.org/samples/latest/charts/doughnut.html

Also, here is an example with multiple datasets and multiple labels too:

https://jsfiddle.net/moe2ggrd/1/

The important part:

  ...
  var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
      labels: ["Green", "Yellow", "Red", "Purple", "Blue"],
      datasets: [{
        data: [1, 2, 3, 4, 5],
        backgroundColor: [
          'green',
          'yellow',
          'red',
          'purple',
          'blue',
        ],
        labels: [
          'green',
          'yellow',
          'red',
          'purple',
          'blue',
        ]
      }, {
        data: [6, 7, 8],
        backgroundColor: [
          'black',
          'grey',
          'lightgrey'
        ],
        labels: [
          'black',
          'grey',
          'lightgrey'
        ],
      }, ]
    },
    ...

Hope it helps someone who's trying to do the same thing.

来源：https://stackoverflow.com/questions/30866844/chart-js-multiple-doughnut-charts-on-same-canvas

标签

javascript

jquery

canvas

charts

chart.js