ChartJS 如何在chart js中将特定数据集的legend.display设置为false

huwehgph  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(206)
  1. var myBarChart = new Chart('myChart', {
  2. type: 'bar',
  3. data: {
  4. labels: ["Single Drive Mode", "Dual Drive Mode"],
  5. datasets: [
  6. {
  7. type: 'bar',
  8. label: "Recordings",
  9. backgroundColor: ["rgba(2,117,216,0.2)","rgba(75, 192, 192, 0.2)"],//"rgb(137,207,240)",////"rgba(2,117,216,1)",
  10. borderColor: ["rgba(2,117,216,1)","rgba(75, 192, 192, 1)"],//"rgb(137,207,240)",////"rgba(2,117,216,1)",
  11. data: [this.data.singledrivemode,this.data.dualdrivemode],
  12. order: 2,
  13. borderWidth: 2,
  14. barPercentage:0.4
  15. },
  16. {
  17. type: 'line',
  18. data: [this.data.totalrecordings, this.data.totalrecordings],
  19. label: 'Total Recordings',
  20. backgroundColor: "rgba(2,117,216,1)",//"rgba(2,117,216,0.2)",//"rgba(150,29,255,1)",
  21. borderColor: "rgba(2,117,216,1)",//"rgba(2,117,216,0.2)",//"rgba(150,29,255,1)",
  22. pointRadius: 3,
  23. pointHoverRadius: 4,
  24. order: 1,
  25. xAxisID: 'xAxis2'
  26. }
  27. ]
  28. },
  29. options: {
  30. plugins: {
  31. tooltip: {
  32. callbacks: {
  33. title: (ttItems) => (ttItems[0].dataset.type === 'line' ? '' : ttItems[0].label),
  34. }
  35. }
  36. },
  37. scales: {
  38. xAxis: {
  39. ticks: {
  40. maxTicksLimit: 6
  41. }
  42. },
  43. yAxis: {
  44. ticks: {
  45. maxTicksLimit: 5
  46. }
  47. },
  48. xAxis2: {
  49. display: false,
  50. offset: false,
  51. ticks: {
  52. display: false
  53. },
  54. // labels:[" "," "," "," "," "]
  55. }
  56. }
  57. }
  58. });

我不想显示条形图标签,即“记录”,但对于折线图,我想显示标签,即“总记录”
我尝试使用选项:{ legend:{ display:false } }
但这会使条形图和折线图标签都消失

r7xajy2e

r7xajy2e1#

您可以使用过滤器回调来过滤掉不想显示的图例项:
第一个

相关问题