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

Question

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

Joc*_*chs 4 javascript jquery charts canvas chart.js

我试图通过在同一画布上多次初始化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>

Run Code Online (Sandbox Code Playgroud)

谢谢,Jochen

Answer 1

pot*_*ngs 6

有2个canvas元素,并使用CSS将它们一个放在另一个上面.内部帆布具有内部甜甜圈,并且具有圆形边界,使得它尽可能少地覆盖外部甜甜圈.

预习

HTML

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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

在这一点上,我们有一个相当不错的饼图与不重叠的甜甜圈,但我们的工具提示将被剪掉,因为它们仍然是他们各自的画布的一部分.

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

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

Answer 2

ton*_*nix 6

您可以使用多个数据集，请查看 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'
        ],
      }, ]
    },
    ...

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	10 年，5 月前
查看次数：	11051 次
最近记录：	6 年，5 月前