Chart.js没有发起

Question

我在我的Bootstrap 4项目中包含了Chart.js。 但由于某种原因，我不能发起chart.js。 我似乎无法找到解决方案。 下面是我使用过的代码。

<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>

Answer 1

ChartJS不适用于div标签，因此您需要使用canvas而不是div标签。 在这里您可以找到图表示例 。

<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>

Answer 2

将其放入document ready上下文中

$(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
 });
})

Answer 3

你的HTML中没有画布。

将其添加到sample-chart div中，如：

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

Answer 4

您需要将div更改为画布或让jQuery使用replacer函数将其从div转换为画布。

 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> 

---

代用品

 (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>