我尝试在我从事的项目中仅显示图表 js 中的示例。不幸的是我被迫使用 Chart 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 来选择 Canvas
var ctx = $("#zeitsteuerungChart").get(0).getContext("2d");
但效果一样!在项目的其他子页面上,它工作得很好!
最佳答案
您在 v1 上使用图表 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);
};
您可以查看图表选项(图表 js v1)here或 complete options here
关于javascript - 图表 js 不显示图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40408247/