我已经在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>
最佳答案
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>