如何在 chart.js 2.9.3 中使用主要刻度线？

Posted 2023-03-25

【中文标题】如何在 chart.js 2.9.3 中使用主要刻度线？

【英文标题】：How to use major tick marks in chart.js 2.9.3?

【发布时间】：2020-08-31 01:23:43

【问题描述】：

我使用最新的 Chart.js 2.9.3。我尝试了以下带有主要刻度的代码：

        var ctx = document.getElementById('chart').getContext('2d');
        var chart  = new Chart(ctx, 
            type: 'horizontalBar',

            data: 
                datasets: [
                    barPercentage: 0.2,
                    borderColor: 'black',
                    borderWidth: 2,
                    borderSkipped: false,
                    backgroundColor: 'transparent',
                    data: [[0, 8000]]
                ]
            ,

            options: 
                legend: false,
                tooltips: false,
                animation: false,
                title: 
                    display: true,
                    fontSize: '26',
                    text: 'AT1G24460'
                ,
                scales: 
                    xAxes: [
                        position: 'top',
                        offset: true,
                        ticks: 
                            major: 
                                enabled: true,
                                fontColor: 'red'
                            
                        ,
                        gridLines: 
                            drawOnChartArea: false
                        
                    ],
                    yAxes: [
                        display: false                        
                    ]
                
            
        );

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
 <div class="text-center">
        <canvas id="chart"></canvas>
</div>

结果如下（根本不显示主要刻度）。那么如何在 chart.js 中使主要刻度线工作？

附：我的最终目标是拥有这样的顶轴：

不用直接画布画什么轴样式是可能的（低于轴基线的刻度，第一个和最后一个刻度被放大，第一个和最后一个刻度有两个标签，除了第一个和最后一个刻度外没有标签等）

提前谢谢你。

【问题讨论】：

我在官方文档中找不到刻度 -> 主要，我找到的最接近的是：chartjs.org/docs/latest/axes/labelling.html 但即使在那里他们说The third parameter passed to the callback function is an array of labels, but in the time scale, it is an array of label: string, major: boolean objects. 我只是尝试过，但事实并非如此......似乎有问题，我会寻找另一个图表提供者，甚至建立自己的

@HelderSepulveda 主要刻度记录在 https://www.chartjs.org/docs/latest/axes/styling.html 内的 Major Tick Configuration 部分。

【参考方案1】：

Official answer:

仅在 2.9 的时间尺度上支持主要刻度。在 3.0 中，他们 也被添加到对数刻度中。它们不在线性比例中 然而。但主要刻度对于决定哪些刻度最有用 在 autoSkipper 中跳过。 3.0 还将增加对 tick 的更好支持 通过可编写脚本的刻度选项 (#7337) 进行样式设置，这将允许您 制作你想要的更粗、更大、不同颜色等的刻度，以及 您不需要为此提供主要的刻度支持。我建议尝试 3.0