Question

我正在试图弄清楚如何使用chart.js加载我的图表，但我不理解所有指南但没有任何作用

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">


        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <script src="js/vendor/modernizr-2.8.3.min.js"></script>
    </head>
    <body>

        <p>Hello world! This is HTML5 Boilerplate.</p>
        <canvas id="linechart" height="400" width="400"></canvas>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.min.js"></script>

        <script src="js/main.js"></script>


        <
    </body>
</html>

这是我的main.js文件：

const CHART=document.getElementById("linechart");
console.log(CHART);
let linechart=new Chart(CHART,{
    type:'line',
    data: {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fill: false,
            lineTension: 0.1,
            backgroundColor: "rgba(75,192,192,0.4)",
            borderColor: "rgba(75,192,192,1)",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "rgba(75,192,192,1)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(75,192,192,1)",
            pointHoverBorderColor: "rgba(220,220,220,1)",
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,
            data: [65, 59, 80, 81, 56, 55, 40],
            spanGaps: false,
        }
    ]
}

});

所以我有一个看起来像这样的task.json文件存储在一个名为task.json的文件中：

[{
        "TaskID": 3523408,
        "TaskDate": "2011-06-20T11:11:11",
        "Technician": "UCH - John Doe"

}]

然后我想把这个json文件存储变成一个变量，这样我就可以在线图上显示它：

[{
    "CountOFtimesinfilethatappearsthisname":0,
    "Technician": "UCH - Billy Metcalf"
}]

有谁知道为什么我能做到这一点？

Answer 1

尝试在浏览器中打开localhost：8080 / css / normalize.css，如果没有加载则不在正确的位置。

检查我的localhost

1 个答案: