我试图实现chartjs官方网站上给出的气泡图
http://www.chartjs.org/docs/latest/charts/line.html
但是它仅显示不带任何数据点的网格。
它也不会显示任何错误。
这是代码
var ctx = document.getElementById("myChart");
var data = [{x:10, y:10, r:10}];
// For a bubble chart
var myBubbleChart = new Chart(ctx,{
type: 'bubble',
data: data,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
min: -30,
max: 30
}
}],
xAxes: [{
ticks: {
beginAtZero:true,
min: -30,
max: 30
}
}],
}
}
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chart Js demo</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script>
</head>
<body>
<div class="chart-container" style="height:400px; width:400px">
<canvas id="myChart" width="40" height="40"></canvas>
</div>
</body>
</html>我想念什么？
最佳答案
您正在错误地定义data属性。它应该是一个对象（由其他属性组成）而不是数组。
所以，你应该使用...
...
data: {
datasets: [{
label: 'Dataset 1',
data: data
}]
},
...
代替 ...
...
data: data,
...
ᴡᴏʀᴋɪɴɢᴇxᴀᴍᴘʟᴇ
var ctx = document.getElementById("myChart");
var data = [{
x: 10,
y: 10,
r: 10
}];
// For a bubble chart
var myBubbleChart = new Chart(ctx, {
type: 'bubble',
data: {
datasets: [{
label: 'Dataset 1',
data: data
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
min: -30,
max: 30
}
}],
xAxes: [{
ticks: {
beginAtZero: true,
min: -30,
max: 30
}
}],
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script>
<div class="chart-container" style="height:400px; width:400px">
<canvas id="myChart" width="40" height="40"></canvas>
</div>关于javascript - Chartjs中的气泡图不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45214356/