图表js不显示图表

Chart js doesn't show chart

本文关键字：显示图 js 图表      更新时间：2023-09-26

我尝试在我工作的项目中仅显示来自图表js的示例。不幸的是，我被迫使用图表Js 1.x。我试图从https://github.com/chartjs/Chart.js/blob/master/samples/bar/bar.html实现酒吧的例子这是一个很简单的例子，我想，但它没有运行:(

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="zeitsteuerungChart"></canvas>

var barChartData = {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            label: 'Dataset 1',
            borderWidth: 1,
            data: [
                "1","1","1","1","1","1","1"
            ]
        }, {
            label: 'Dataset 2',
            borderWidth: 1,
            data: [
                "1","1","1","1","1","1","1"
            ]
        }]
    };
    window.onload = function() {
        var ctx = document.getElementById("zeitsteuerungChart").getContext("2d");
        var myBar = new Chart(ctx, {
            type: 'bar',
            data: barChartData
        });
    };
图表JS操作 

<canvas id="zeitsteuerungChart"></canvas>

元素到

<canvas id="zeitsteuerungChart" width="300" height="150" style="width: 300px; height: 150px;"></canvas>

但是差不多就是这样了。没有图表显示出来。控制台没有错误。我试着用jQuery来选择画布

var ctx = $("#zeitsteuerungChart").get(0).getContext("2d");

但效果相同!在项目的其他子页面上，它工作得很好!

在v1上使用的是chart js v2语法

对v1 

var barChartData = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [{
    label: 'Dataset 1',
    borderWidth: 1,
    data: ["1","1","1","1","1","1","1"]
  },
  {
    label: 'Dataset 2',
    borderWidth: 1,
    data: ["1","1","1","1","1","1","1"]
  }]
};
window.onload = function() {
  var ctx = document.getElementById("zeitsteuerungChart").getContext("2d");
  var myBar = new Chart(ctx).Bar(barChartData, options);
};

你可以在这里查看图表选项(chart js v1)或在这里查看完整选项

相关文章：