Question

我尝试实施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>

我缺少什么？

Answer 1

您错误地定义了 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>

Answer 2

数据对象的结构应该不同。

例如......

 data: {
        datasets: [{
            label: ["Label"],
            data: [{x: 3, y:4, r:5}]
        }]
    },

Chartjs中的气泡图无法正常工作

2 个答案: