Chartjs fiddle 不工作

Question

我对 JS 完全陌生Fiddle。我目前正在尝试显示一个散点图，但没有显示任何内容。谁能指出我正确的方向？

这是 Fiddle：http://jsfiddle.net/roka545/qf8ejytt/

//Get context with jQuery - using jQuery's .get() method.
let canvas = <HTMLCanvasElement>document.getElementById("myChart");
let ctx = canvas.getContext("2d");

let xAxisMin: number = 4;
let xAxisMax: number = 7;

var scatterChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            label: 'Scatter Dataset',
            data: [{
                x: -10,
                y: 0
            }, {
                x: 0,
                y: 10
            }, {
                x: 10,
                y: 5
            }]
        }]
    },
    options: {
        scales: {
            xAxes: [{
                type: 'linear',
                position: 'bottom'
            }]
        }
    }
});

Answer 1

你看控制台了吗？它说：

那是因为：

意思是你提供的 link 超过了 http 而不是像 jsfiddle 那样的 https。出于安全原因，浏览器不允许此类请求（http 在 https 站点内）。

尽管如此，我正在寻找一个工作示例，似乎所有 chart.js fiddles 都有相同的错误：

https://jsfiddle.net/uc25erpc/

https://jsfiddle.net/achudars/NXPhL/

http://fiddle.jshell.net/leighking2/898kzyp7/

Answer 2

您需要在实际来源中添加一个link，例如：

https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js

在外部资源中，然后按加号按钮。

看这里：

http://jsfiddle.net/r7ahsn15/

Chartjs fiddle 不工作

Chartjs fiddle not working

javascript

charts

jsfiddle

typescript

chart.js