代码之家 › 专栏 › 技术社区 › Kat

(Chart.js)网页不显示图表,控制台中没有错误

chart.js2 charts

Kat · 技术社区 · 8 年前

我是新手。并尝试构建一些简单的东西。控制台中没有错误,但图表不会显示在我的网页上。我不知道它来自哪里。

<!DOCTYPE>
<html>
<head>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>

</head>

<body>

    <div id="center"><canvas id="canvas" width="600" height="400"></canvas></div>

  <script>


    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    var datas = {
        labels: ["2010", "2011", "2012", "2013"],
        datasets: [
            {
                type: "line",
                data : [150,200,250,150],
                color:"#878BB6",
            },
            {
                type: "line",
                data : [250,100,150,10],
                color : "#4ACAB4",
            }
        ]
    }

  </script>
</body>
</html>

1 回复 | 直到 8 年前

É¢Êá´É´á´ 8 年前

您没有正确构建图表。下面是它应该如何创建。。。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var myChart = new Chart(ctx, {
   type: 'line',
   data: {
      labels: ["2010", "2011", "2012", "2013"],
      datasets: [{
         label: 'Dataset 1',
         data: [150, 200, 250, 150],
         color: "#878BB6",
      }, {
         label: 'Dataset 2',
         data: [250, 100, 150, 10],
         color: "#4ACAB4",
      }]
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<div id="center">
   <canvas id="canvas" width="600" height="400"></canvas>
</div>

official documentation .

推荐文章

David · 为图表选择全部并取消选择选项。js公司

8 年前

Åukasz Zaroda · 在包含条形图和直线的混合图表中,如何在两个方向上将线延伸到图表之外?

8 年前

Ryan Arellano · 图表js添加编号

8 年前

TheNovice · 如何在图表中保留两个不同条形图的条形图之间的间距。js 2

8 年前

IcyPopTarts · 使用2个数据集Charts.js生成图表

8 年前

BellHopByDayAmetuerCoderByNigh · 图表JS中的条形图颜色

8 年前

OwN · 图表js日期和时间条形图未呈现-但线条可行

8 年前

Kat · (Chart.js)网页不显示图表,控制台中没有错误

8 年前

Phil · ChartJS 2.0代码差异需要帮助

9 年前