ChartJS X轴标签的条件格式

vlju58qv  于 9个月前  发布在  Chart.js
关注(0)|答案(1)|浏览(145)

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

options: {
    animation: false,
    scales: {
        x: {
            grid: {
                display: false
            },
            ticks: {
                callback: function (index) {
                    console.log('Index:', index);
                    console.log('Data:', data[index]);
                    console.log('Label:', labels[index]);
                    if (data[index] > 0) {
                        console.log("Data greater than 0")
                        return {
                            color: '#333',
                            font: {
                                weight: 'bold'
                            },
                            text: labels[index]
                        };
                    } else {
                        console.log("Data not greater than 0")
                        return {
                            color: '#333',
                            text: labels[index]
                        };
                    }
                }
            }
        },

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

[Log] Index: – 0 (ascents.php, line 992)
[Log] Data: – 0 (ascents.php, line 993)
[Log] Label: – "Monday" (ascents.php, line 994)
[Log] Data not greater than 0 (ascents.php, line 1005)
[Log] Index: – 1 (ascents.php, line 992)
[Log] Data: – 0 (ascents.php, line 993)
[Log] Label: – "Tuesday" (ascents.php, line 994)
[Log] Data not greater than 0 (ascents.php, line 1005)
[Log] Index: – 2 (ascents.php, line 992)
[Log] Data: – "3" (ascents.php, line 993)
[Log] Label: – "Wednesday" (ascents.php, line 994)
[Log] Data greater than 0 (ascents.php, line 996)
[Log] Index: – 3 (ascents.php, line 992)
[Log] Data: – 0 (ascents.php, line 993)
[Log] Label: – "Thursday" (ascents.php, line 994)
[Log] Data not greater than 0 (ascents.php, line 1005)
[Log] Index: – 4 (ascents.php, line 992)
[Log] Data: – 0 (ascents.php, line 993)
[Log] Label: – "Friday" (ascents.php, line 994)
[Log] Data not greater than 0 (ascents.php, line 1005)
[Log] Index: – 5 (ascents.php, line 992)
[Log] Data: – 0 (ascents.php, line 993)
[Log] Label: – "Saturday" (ascents.php, line 994)
[Log] Data not greater than 0 (ascents.php, line 1005)
[Log] Index: – 6 (ascents.php, line 992)
[Log] Data: – 0 (ascents.php, line 993)
[Log] Label: – "Sunday" (ascents.php, line 994)
[Log] Data not greater than 0 (ascents.php, line 1005)


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

options: {
                animation: false,
                scales: {
                    x: {
                        grid: {
                            display: false
                        },
                        ticks: {
                            callback: function (index) {
                                if (data[index] > 0) {
                                    return labels[index];
                                } else {
                                    return labels[index];
                                }
                            }
                        }
                    },


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

juud5qan

juud5qan1#

在这里我找到了答案:

x: {
    grid: {
        display: false
    },
    ticks: {
        font: {
            weight: function (context) {
                if (data[context.index] > 0) {
                    return 'bold';
                } else {
                    return 'normal';
                }
            }
        }
    }
}

字符串

相关问题