ChartJS仅显示特定刻度的大字体 [英] ChartJS Only Show Large Font Size for a Specific Tick

问题描述

如果要满足特定条件，我会尝试在X轴上强调特定值。

I am attempting to emphasize a specific value on the X-Axis if it meets a specific condition.

例如，在我的 codepen 我只想更改蓝色栏的字体大小。

For example, in my codepen I want to only change the font size of the 'blue' bar. Is this even possible with Chart.js?

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }],
            xAxes: [{
                ticks: {
                    //only show large font size for 'Blue'
                    fontSize: 16
                }
            }]
        }
    }
});

推荐答案

Chartjs没有公共api可以做到这一点但是您可以在_ticks rel = nofollow noreferrer> beforeDraw 并将标签 Blue设置为 major：true 然后将使用 绘制标签壁虱配置选项中的主要 样式。

Chartjs doesn't have a public api to do this but you can modify internal _ticks on beforeDraw and make the label "Blue" as major: true then that label will be drawn using the major styling in tick configuration options.

也请谨慎使用，因为它依赖于内部实现，因此将来可能会中断发布（非常不可能发生，只是说）。

Also use this with caution since it relies on internal implementation and thus might break in future releases (very unlikely to happen but just saying).

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }],
            xAxes: [{
                ticks: {
                    fontSize: 16,
                    major: {
                      fontSize: 20
                    }
                }
            }]
        }
    }, 
    plugins: [{
        beforeDraw: function({ chart }, options) {
            chart.boxes
            .find(box => box.id === "x-axis-0")
            ._ticks
            .find(tick => tick.label === "Blue")
            .major = true;
        }
    }]
});

<canvas id="myChart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>

PS：以防万一有人想知道我如何知道这个内部我在chartjs github源代码和 console.log（myChart） xD

PS: Just in case someone is wondering how I know this internal implementation I searched fillText in chartjs github source code and console.log(myChart) xD

这篇关于ChartJS仅显示特定刻度的大字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！