为什么我的 ChartJS 图表不能在 iframe 中工作？答案

【问题标题】：Why doesn't my ChartJS graph work in an iframe?为什么我的 ChartJS 图表不能在 iframe 中工作？
【发布时间】：2020-05-18 14:36:30
【问题描述】：

我将这三个元素（CSS、JavaScript、HTML）组合到我的 Wix 网站中，但是没有用。有谁知道它为什么不起作用，因为在demo 中它工作得很好。问题是在网站上它只显示“89%”并且饼没有出现。代码存储在 HTML iframe 中。

<head>

    <style type="text/css">
        .outer {
            position: relative;
            width: 600px;
            height: 400px;
        }

        canvas {
            position: absolute;
        }

        .percent {
            position: absolute;
            left: 50%;
            transform: translate(-50%, 0);
            font-size: 80px;
            bottom: 0;
        }
    </style>


</head>


<body>
    <div class="outer">
        <canvas id="chartJSContainer" width="600" height="400"></canvas>
        <canvas id="secondContainer" width="600" height="400"></canvas>
        <p class="percent">
            89%
        </p>
    </div>

    <script>
        var options1 = {
            type: 'doughnut',
            data: {
                labels: ["Red", "Orange", "Green"],
                datasets: [{
                    label: '# of Votes',
                    data: [33, 33, 33],
                    backgroundColor: [
                        'rgba(231, 76, 60, 1)',
                        'rgba(255, 164, 46, 1)',
                        'rgba(46, 204, 113, 1)'
                    ],
                    borderColor: [
                        'rgba(255, 255, 255 ,1)',
                        'rgba(255, 255, 255 ,1)',
                        'rgba(255, 255, 255 ,1)'
                    ],
                    borderWidth: 5
                }]
            },
            options: {
                rotation: 1 * Math.PI,
                circumference: 1 * Math.PI,
                legend: {
                    display: false
                },
                tooltip: {
                    enabled: false
                },
                cutoutPercentage: 95
            }
        }

        var ctx1 = document.getElementById('chartJSContainer').getContext('2d');
        new Chart(ctx1, options1);

        var options2 = {
            type: 'doughnut',
            data: {
                labels: ["", "Purple", ""],
                datasets: [{
                    data: [88.5, 1, 10.5],
                    backgroundColor: [
                        "rgba(0,0,0,0)",
                        "rgba(255,255,255,1)",
                        "rgba(0,0,0,0)",
                    ],
                    borderColor: [
                        'rgba(0, 0, 0 ,0)',
                        'rgba(46, 204, 113, 1)',
                        'rgba(0, 0, 0 ,0)'
                    ],
                    borderWidth: 3

                }]
            },
            options: {
                cutoutPercentage: 95,
                rotation: 1 * Math.PI,
                circumference: 1 * Math.PI,
                legend: {
                    display: false
                },
                tooltips: {
                    enabled: false
                }
            }
        }

        var ctx2 = document.getElementById('secondContainer').getContext('2d');
        new Chart(ctx2, options2);

    </script>

</body>

【问题讨论】：

我看不到您在哪里加载 ChartJS 库文件。控制台有什么错误？
请take the tour在这里了解如何参与。

标签： javascript html css velo

【解决方案1】：

我怀疑你只需要加载 ChartJS 库：

  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
</head>

或者：

  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
</body>

【讨论】：