如何编辑laravel/chart.js箱线图的标签和x轴?

tez616oj  于 2023-01-05  发布在  Chart.js
关注(0)|答案(1)|浏览(161)

在Laravel前端绘图的Chart.js翻译。有3个月的日期及其数据的产量。我应该如何适合重叠的charjs,而不是所有的日期都写在x的末尾?(文本重叠,我不想这样,我想所有的日期都在x轴上,我认为chartjs跳过它,因为不能适合它。)这是很重要的,你能与我联系吗

var myChart1 = new Chart(ctx1, {
        type: 'bar',
        data: {
                labels: dates,
                datasets: [{
        label: 'BACKLOG ON HOLD INCIDENTS AVG PERFORMANCE- BURSA',
        data: results,
        backgroundColor: [
            'rgba(76, 196, 23, 0.6)'

        ],
        borderColor: [
            'rgba(219, 249, 219, 1)',

        ],
        borderWidth: 1,
                }]
        },
        plugins: [ChartDataLabels],
        options: {

                plugins:{
                legend:{
                        display:true
                },
        datalabels:{
                color:'blue',
                anchor:'end',
        font:{
                weight:'bold',
                size:8
             }
                  }
        },
        scales: {
        y: {
            beginAtZero: true
           },
        x: {
            ticks: {
                maxRotation: 90,
                minRotation: 90,
                font: {
                size: 8,
            }
            }
           }
        },
        animation: {
            duration: 0
        }
        }
    });
ui7jx7zq

ui7jx7zq1#

要垂直显示标签,请将ticks.maxRotationticks.minRotation选项设置为90度。

options: {
  scales: {
    x: {
      ticks: {
        maxRotation: 90,
        minRotation: 90
      }
    }
  }
}

相关问题