ChartJS 仅显示特定刻度的大字体

问题描述

如果满足特定条件，我试图强调 X 轴上的特定值.

例如，在我的 codepen 中，我只想更改 ' 的字体大小蓝色'酒吧.Chart.js 甚至可以做到这一点吗?

var ctx = document.getElementById("myChart").getContext('2d');var myChart = new Chart(ctx, {类型:'酒吧'，数据: {标签:[红色"，蓝色"，黄色"，绿色"，紫色"，橙色"]，数据集:[{标签:'投票数'，数据:[12、19、3、5、2、3]，背景颜色: ['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)'],边框颜色: ['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)'],边框宽度:1}]},选项: {秤:{y轴:[{滴答声:{开始零:真}}],x轴:[{滴答声:{//仅显示蓝色"的大字体字体大小:16}}]}}});

解决方案

Chartjs 没有公共 api 来执行此操作，但您可以在 并将标签Blue"设为major: true 那么该标签将使用 major 标记配置选项中的样式.

还要谨慎使用它，因为它依赖于内部实现，因此可能会在未来的版本中中断(不太可能发生，只是说一下).

var ctx = document.getElementById("myChart").getContext('2d');var myChart = new Chart(ctx, {类型:'酒吧'，数据: {标签:[红色"，蓝色"，黄色"，绿色"，紫色"，橙色"]，数据集:[{标签:'投票数'，数据:[12、19、3、5、2、3]，背景颜色: ['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)'],边框颜色: ['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)'],边框宽度:1}]},选项: {秤:{y轴:[{滴答声:{开始零:真}}],x轴:[{滴答声:{字体大小:16，重大的: {字体大小:20}}}]}},插件:[{beforeDraw:函数({图表}，选项){图表框.find(box => box.id === "x-axis-0")._ticks.find(tick => tick.label === "蓝色").major =真；}}]});

<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

fillText>

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

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 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: 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 仅显示特定刻度的大字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！