Question

我试图通过在同一画布上多次初始化Chart.js来模拟多层圆环图。当时只有一个图表可见。当你将鼠标悬停在其位置上时，另一个将会显示...

有人知道如何让两者同时可见吗？

这是我的代码：

<!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>

谢谢，约亨

Answer 1

有2个画布元素，并使用CSS将它们一个放在另一个上面。内部帆布具有内部甜甜圈，并具有圆形边框，以便尽可能少地覆盖外部甜甜圈。

预览

<强> 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%); }

小提琴 - https://jsfiddle.net/rhLxawt5/

此时我们有一个相当不错的饼图与不重叠的甜甜圈，但是我们的工具提示会被剪掉，因为它们仍然是各自画布的一部分。

我们可以通过编写customTooltips函数来使用div而不是在画布中绘制矩形来解决这个问题。

小提琴 - https://jsfiddle.net/rca0ync3/

Answer 2

您可以使用多个数据集，查看Chart JS演示页面：

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

此外，这里有一个包含多个数据集和多个标签的示例：

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

重要的部分：

  ...
  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'
        ],
      }, ]
    },
    ...

希望它可以帮助那些试图做同样事情的人。

Chart.js - 同一画布上的多个甜甜圈图表

2 个答案: