当前位置:  首页>> 技术小册>> chat.js零基础入门

气泡图用于展示三个变量之间的关系。

气泡的位置由前两个变量决定,对应的是 X 轴和 Y 轴,第三个参数为气泡的大小。

  1. {
  2. // X 轴对应值
  3. x: number,
  4. // Y 轴对应值
  5. y: number,
  6. // 气泡半径,单位为像素
  7. r: number
  8. }

泡图的 type 属性为 bubble ,type 描述了图表类型。

  1. const config = {
  2. type: 'bubble',
  3. data: data,
  4. options: {}
  5. };

接下来我们创建一个简单的气泡图:

实例

  1. const ctx = document.getElementById('myChart');
  2. const data = {
  3. datasets: [{
  4. label: '气泡图实例',
  5. data: [{
  6. x: 20, // X
  7. y: 30, // Y
  8. r: 15 // 气泡半径
  9. }, {
  10. x: 30,
  11. y: 20,
  12. r: 20
  13. }, {
  14. x: 40,
  15. y: 10,
  16. r: 10
  17. }],
  18. backgroundColor: 'rgb(255, 99, 132)'
  19. }]
  20. };
  21. const config = {
  22. type: 'bubble', // 设置图表类型
  23. data: data, // 设置数据集
  24. options: {
  25. },
  26. };
  27. const myChart = new Chart(ctx, config);


该分类下的相关小册推荐:

暂无相关推荐.