Ich habe Chart.js in mein Bootstrap 4-Projekt aufgenommen. Aber aus irgendeinem Grund kann ich chart.js nicht initiieren. Ich kann die Lösung nicht finden. Unten ist mein Code, den ich verwendet habe.

<div id="sample-chart"></div>

<style>


#sample-chart{
 height: 300px;
 width: 500px;
}
</style>

<script>
 var areaData = {
   labels: ["1", "2", "3", "4", "5"],
   datasets: [{
       data: [60, 63, 68, 53, 52],
       backgroundColor: [
         '#D6EEF3'
       ],
       borderColor: [
         '#1DBFD3'
       ]
     }
   ]
 };
 var areaOptions = {
   responsive: true,
   maintainAspectRatio: false
 }
 var sampleChartCanvas = $("#sample-chart").get(0).getContext("2d");
 var sampleChart = new Chart(sampleChartCanvas, {
   type: 'line',
   data: areaData,
   options: areaOptions
 });
</script>
2
Dhanya Bose 19 Apr. 2018 im 14:13

4 Antworten

Beste Antwort

ChartJS funktioniert nicht mit div-Tags, daher müssen Sie anstelle des div-Tags Canvas verwenden. Hier finden Sie Beispiele.

<canvas id="sample-chart" height="300" width="500">

<script>
var areaData = {
 labels: ["1", "2", "3", "4", "5"],
 datasets: [{
     data: [60, 63, 68, 53, 52],
     backgroundColor: [
       '#D6EEF3'
     ],
     borderColor: [
       '#1DBFD3'
     ]
   }
 ]
};
var areaOptions = {
 responsive: true,
 maintainAspectRatio: false
}
var sampleChartCanvas = $("#sample-chart").get(0).getContext("2d");
var sampleChart = new Chart(sampleChartCanvas, {
 type: 'line',
 data: areaData,
 options: areaOptions
});
</script>
2
Fabul 19 Apr. 2018 im 13:24

Sie müssen entweder das div in eine Zeichenfläche ändern oder es von jQuery mithilfe einer Ersetzungsfunktion von einer div in eine Zeichenfläche konvertieren lassen.

var areaData = {
  labels: ["1", "2", "3", "4", "5"],
  datasets: [{
    data: [60, 63, 68, 53, 52],
    backgroundColor: [ '#D6EEF3' ],
    borderColor: [ '#1DBFD3' ]
  }]
};

var areaOptions = {
  responsive: true,
  maintainAspectRatio: false
}

var sampleChartCanvas = $("#sample-chart").get(0).getContext("2d");
var sampleChart = new Chart(sampleChartCanvas, {
  type: 'line',
  data: areaData,
  options: areaOptions
});
#sample-chart {
  height: 300px;
  width: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>

<!-- Needs to be a canvas, not a div -->
<canvas id="sample-chart"></canvas>

Ersatz

(function($) {
  $.fn.applyAttributes = function(attributes) {
    var self = this;
    $.each(attributes, function() {
      self.attr(this.name, this.value);
    });
    return self;
  };
  $.fn.replaceTag = function(tagName) {
    this.each((i, e) => {
      this.replaceWith($('<' + tagName + '>').applyAttributes(this.prop('attributes')));
    });
  };
})(jQuery);

var areaData = {
  labels: ["1", "2", "3", "4", "5"],
  datasets: [{
    data: [60, 63, 68, 53, 52],
    backgroundColor: [ '#D6EEF3' ],
    borderColor: [ '#1DBFD3' ]
  }]
};

var areaOptions = {
  responsive: true,
  maintainAspectRatio: false
};

$("#sample-chart").replaceTag('canvas'); // Replace tag name with canvas

// Modified the DOM, we will need to re-query it.
var sampleChartCanvas = $("#sample-chart").get(0).getContext("2d");
var sampleChart = new Chart(sampleChartCanvas, {
  type: 'line',
  data: areaData,
  options: areaOptions
});
#sample-chart {
  height: 300px;
  width: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>

<!-- Needs to be a canvas, not a div -->
<div id="sample-chart"></div>
0
Mr. Polywhirl 19 Apr. 2018 im 11:38

Es gibt keine Leinwand in Ihrem HTML.

Fügen Sie es wie folgt in das sample-chart div ein:

<div id="sample-chart">
<canvas id="myChart"></canvas>
</div>
0
Aniko Litvanyi 19 Apr. 2018 im 11:21

Setzen Sie es in den document ready Kontext

$(function () {
 var areaData = {
   labels: ["1", "2", "3", "4", "5"],
   datasets: [{
       data: [60, 63, 68, 53, 52],
       backgroundColor: [
         '#D6EEF3'
       ],
       borderColor: [
         '#1DBFD3'
       ]
     }
   ]
 };
 var areaOptions = {
   responsive: true,
   maintainAspectRatio: false
 }
 var sampleChartCanvas = $("#sample-chart").get(0).getContext("2d");
 var sampleChart = new Chart(sampleChartCanvas, {
   type: 'line',
   data: areaData,
   options: areaOptions
 });
})
1
Radonirina Maminiaina 19 Apr. 2018 im 11:16