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

饼图,或称饼状图,是一个划分为几个扇形的圆形统计图表,用于描述量、频率或百分比之间的相对关系。在饼图中,每个扇区的弧长(以及圆心角和面积)大小为其所表示的数量的比例。这些扇区合在一起刚好是一个完全的圆形。顾名思义,这些扇区拼成了一个切开的饼形图案。

饼图 type 属性为 pie ,type 描述了图表类型。

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

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

实例

  1. const ctx = document.getElementById('myChart');
  2. const data = {
  3. labels: [
  4. 'Red',
  5. 'Blue',
  6. 'Yellow'
  7. ],
  8. datasets: [{
  9. label: '饼图实例',
  10. data: [300, 50, 100],
  11. backgroundColor: [
  12. 'rgb(255, 99, 132)',
  13. 'rgb(54, 162, 235)',
  14. 'rgb(255, 205, 86)'
  15. ],
  16. hoverOffset: 4
  17. }]
  18. };
  19. const config = {
  20. type: 'pie',
  21. data: data,
  22. options: {
  23. responsive: true, // 设置图表为响应式,根据屏幕窗口变化而变化
  24. maintainAspectRatio: false,// 保持图表原有比例
  25. scales: {
  26. yAxes: [{
  27. ticks: {
  28. beginAtZero:true
  29. }
  30. }]
  31. }
  32. }
  33. };
  34. const myChart = new Chart(ctx, config);


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

暂无相关推荐.