ChartJs：图表未显示在 VF 页面中

Question

I'm using Chart.Js to draw a scatter chart in VF page but in the preview, the chart is not displayed.我正在使用 Chart.Js 在 VF 页面中绘制散点图，但在预览中，图表未显示。 Not getting any errors but the chart is not displayed.没有收到任何错误，但图表未显示。 Below is my VF page code.Appreciate your help以下是我的 VF 页面代码。感谢您的帮助

<apex:page showHeader="true" sidebar="false" id="page" docType="html-5.0">
<html>
<head>
    <meta charset="utf-8"/>
    <title>Chart.js demo</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js" type="text/javascript"></script>
</head>
<body>


    <h1>Chart.js Sample</h1>

    <canvas id="myChart" width="600" height="400"></canvas>
    <script>
        
        var ctx= document.getElementById("myChart").getContext("2d");
    new Chart(ctx, {
        type: 'scatter',
        data: {
            datasets: [{
                label: 'Scatter Dataset',
                backgroundColor: 'green',
                data: [{
                    x: -10,
                    y: 0
                }, {
                    x: 0,
                    y: 10
                }, {
                    x: 10,
                    y: 5
                }]
            }]
        },
        options: {
            scales: {
                x: {
                    type: 'linear',
                    position: 'bottom'
                }
            }
        }
    });
    </script>
</body>       
</html>
</apex:page>

Answer 1

you are using a very old version of chart.js (as a matter of fact, the first ever released).您使用的是非常旧的 chart.js 版本（事实上，第一次发布）。

You could solve this by replacing:你可以通过替换来解决这个问题：

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js" type="text/javascript"></script>

with和

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Fixed versions can also be found, eg here .也可以找到固定版本，例如这里。

working codepen工作密码笔

ChartJs：图表未显示在 VF 页面中

问题描述

1 个解决方案

解决方案1
0 2022-09-05 14:22:09

ChartJs：图表未显示在 VF 页面中

问题描述

1 个解决方案

解决方案1 0 2022-09-05 14:22:09

解决方案1
0 2022-09-05 14:22:09