ChartJS 如何在图表js中绘制水平线,当悬停显示数据

wsewodh2  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(238)
  1. ngOnInit(): void {
  2. var myChart = new Chart('myChart', {
  3. type: 'bar',
  4. data: {
  5. labels: ['Recordings'],
  6. datasets: [
  7. {
  8. label: 'A',
  9. data: [this.data.a],
  10. borderColor: 'rgba(255,105,180,1)',
  11. backgroundColor: 'rgba(255,105,180,0.2)',
  12. barPercentage:0.4,
  13. borderWidth:2,
  14. order: 1
  15. },
  16. {
  17. label: 'B',
  18. data: [this.data.b],
  19. borderColor: 'rgba(75, 192, 192, 1)',
  20. backgroundColor: 'rgba(75, 192, 192, 0.2)',
  21. barPercentage:0.4,
  22. borderWidth:2,
  23. order: 2
  24. },
  25. {
  26. label: 'Total Recordings',
  27. data:[this.data.totalrecordings],
  28. type:'line',
  29. borderColor:'rgba(2,117,216,1)',
  30. backgroundColor:'rgba(2,117,216,0.2)',
  31. order:0
  32. }
  33. ]
  34. },
  35. options: {
  36. responsive: true,
  37. plugins: {
  38. legend: {
  39. position: 'top',
  40. }
  41. }
  42. },
  43. })
  44. }

我希望总记录折线图应该是一条水平直线,当我将鼠标悬停在该直线上时,它应该显示总记录值。现在,该图正在绘制,如图所示。

2w2cym1i

2w2cym1i1#

我终于找到了出路。答案是一个漂浮的酒吧

  1. {
  2. label: 'Total Recordings',
  3. data: [[data.totalrecordings -0.5, data.totalrecordings + 0.5]]
  4. categoryPercentage: 1,
  5. barPercentage: 1,
  6. borderColor:'rgba(2,117,216,1)',
  7. backgroundColor:'rgba(2,117,216,0.2)',
  8. order:0
  9. }

此外,要在悬停时正确显示总记录数据,请使用此

  1. tooltip: {
  2. mode: 'index',
  3. callbacks: {
  4. label: ctx => ctx.dataset.label + ': ' + (ctx.datasetIndex == 2 ?
  5. data.totalrecordings : ctx.parsed.y)
  6. }
  7. }
展开查看全部

相关问题