隐藏x轴上的刻度线会剪切图表(Chart.JS)

时间:2018-02-14 09:40:36

标签: javascript chart.js chart.js2

我试图隐藏气泡图的x轴上的刻度。

我尝试使用" display:false"在ticks属性内。

它确实删除了刻度,但现在正在剪裁图表。

有没有办法可以隐藏这些刻度,而不会影响图表的外观,或者可能添加一些填充,以便图表的外观不受影响?

Appearance before the ticks are removed

Clipping once the ticks are removed with "display: false"

您可以看到我在下面创建的图表的代码:

xAxes : [
    {
        id : 'first-x-axis',
        ticks : {
            display : false,
            min :  <  ? php echo $min ?  > , // Controls where axis starts
            max :  <  ? php echo $max ?  > , // Controls where axis finishes
            stepSize :  <  ? php echo $step ?  > // Control the gap between the first x-axis value and the last x-axis value
        },
        gridLines : {
            display : false,
            lineWidth : 7 // Width of bottom line
        }
    }
]

我感谢任何帮助或建议^ _ ^

1 个答案:

答案 0 :(得分:1)

我明白了!

您可以使用&#34; tickMarkLength&#34;来调整刻度线的高度/长度。在&#34;网格线内&#34;

您可以在下面看到解决方案的代码:

xAxes: [
    {
        id: 'first-x-axis',
        ticks: {
            display: false,
            min: <?php echo $min ?>, // Controls where axis starts
            max: <?php echo $max ?>, // Controls where axis finishes
            stepSize: <?php echo $step ?> // Control the gap between the first x-axis value and the last x-axis value
        },
        gridLines: {
            display: false,
            lineWidth: 7,
            tickMarkLength: 30// Adjusts the height for the tick marks area
        }
    }
]

我希望这有帮助!