我在我的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>
答案 0 :(得分:2)
ChartJS不适用于div标签,因此您需要使用canvas而不是div标签。在这里你可以找到图表examples。
<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>
答案 1 :(得分:1)
将其放入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
});
})
答案 2 :(得分:0)
你的html中没有画布。
将其添加到sample-chart
div中,如:
<div id="sample-chart">
<canvas id="myChart"></canvas>
</div>
答案 3 :(得分:0)
您需要将div更改为画布或让jQuery使用替换函数将其从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
});
&#13;
#sample-chart {
height: 300px;
width: 500px;
}
&#13;
<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>
&#13;
(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
});
&#13;
#sample-chart {
height: 300px;
width: 500px;
}
&#13;
<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>
&#13;