ChartJS X轴标签的条件格式

vlju58qv  于 2024-01-07  发布在  Chart.js
关注(0)|答案(1)|浏览(278)

我想加粗x轴标签，如果相关的数据大于0.似乎很容易，但不能做到这一点.这里我的代码：

  1. options: {
  2.     animation: false,
  3.     scales: {
  4.         x: {
  5.             grid: {
  6.                 display: false
  7.             },
  8.             ticks: {
  9.                 callback: function (index) {
  10.                     console.log('Index:', index);
  11.                     console.log('Data:', data[index]);
  12.                     console.log('Label:', labels[index]);
  13.                     if (data[index] > 0) {
  14.                         console.log("Data greater than 0")
  15.                         return {
  16.                             color: '#333',
  17.                             font: {
  18.                                 weight: 'bold'
  19.                             },
  20.                             text: labels[index]
  21.                         };
  22.                     } else {
  23.                         console.log("Data not greater than 0")
  24.                         return {
  25.                             color: '#333',
  26.                             text: labels[index]
  27.                         };
  28.                     }
  29.                 }
  30.             }
  31.         },

字符串
我添加了console.log来帮助我调试这个东西，控制台返回什么：

  1. [Log] Index: – 0 (ascents.php, line 992)
  2. [Log] Data: – 0 (ascents.php, line 993)
  3. [Log] Label: – "Monday" (ascents.php, line 994)
  4. [Log] Data not greater than 0 (ascents.php, line 1005)
  5. [Log] Index: – 1 (ascents.php, line 992)
  6. [Log] Data: – 0 (ascents.php, line 993)
  7. [Log] Label: – "Tuesday" (ascents.php, line 994)
  8. [Log] Data not greater than 0 (ascents.php, line 1005)
  9. [Log] Index: – 2 (ascents.php, line 992)
  10. [Log] Data: – "3" (ascents.php, line 993)
  11. [Log] Label: – "Wednesday" (ascents.php, line 994)
  12. [Log] Data greater than 0 (ascents.php, line 996)
  13. [Log] Index: – 3 (ascents.php, line 992)
  14. [Log] Data: – 0 (ascents.php, line 993)
  15. [Log] Label: – "Thursday" (ascents.php, line 994)
  16. [Log] Data not greater than 0 (ascents.php, line 1005)
  17. [Log] Index: – 4 (ascents.php, line 992)
  18. [Log] Data: – 0 (ascents.php, line 993)
  19. [Log] Label: – "Friday" (ascents.php, line 994)
  20. [Log] Data not greater than 0 (ascents.php, line 1005)
  21. [Log] Index: – 5 (ascents.php, line 992)
  22. [Log] Data: – 0 (ascents.php, line 993)
  23. [Log] Label: – "Saturday" (ascents.php, line 994)
  24. [Log] Data not greater than 0 (ascents.php, line 1005)
  25. [Log] Index: – 6 (ascents.php, line 992)
  26. [Log] Data: – 0 (ascents.php, line 993)
  27. [Log] Label: – "Sunday" (ascents.php, line 994)
  28. [Log] Data not greater than 0 (ascents.php, line 1005)

型
正如你所看到的，“星期三”应该是粗体的，但它并不像下图所示：
What Safari displays
除了格式化之外，甚至连星期几也不再出现，而是被“[object Object]"取代。
只是为了让你知道，这显示正确的工作日：

  1. options: {
  2.                 animation: false,
  3.                 scales: {
  4.                     x: {
  5.                         grid: {
  6.                             display: false
  7.                         },
  8.                         ticks: {
  9.                             callback: function (index) {
  10.                                 if (data[index] > 0) {
  11.                                     return labels[index];
  12.                                 } else {
  13.                                     return labels[index];
  14.                                 }
  15.                             }
  16.                         }
  17.                     },

型
但显然没有我想要的条件格式。

chart.js

1条答案

按热度按时间
juud5qan

juud5qan1#

在这里我找到了答案：

  1. x: {
  2.     grid: {
  3.         display: false
  4.     },
  5.     ticks: {
  6.         font: {
  7.             weight: function (context) {
  8.                 if (data[context.index] > 0) {
  9.                     return 'bold';
  10.                 } else {
  11.                     return 'normal';
  12.                 }
  13.             }
  14.         }
  15.     }
  16. }

字符串

展开查看全部
赞(0）分享  回复(0）举报  2024-01-07
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com