Why doesn't my ChartJS graph work in an iframe?

问题

I combined these three Elements (CSS, JavaScript, HTML) to put it into my Wix Website, which however did not work. Does anyone has an idea why it doesn't work, since in the demo it works just fine. The problem is that on the Website it shows only "89%" and the pie does not show up. The code is stored in an 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>

回答1:

I suspect that you just need to load the ChartJS library:

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

Or:

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

来源：https://stackoverflow.com/questions/61872066/why-doesnt-my-chartjs-graph-work-in-an-iframe

标签

javascript

html

css

wixcode