更改 Y 轴最大比例 - Chart.js

时间:2021-07-20 05:08:43

标签: javascript charts chart.js

由于 ctx.chart.scales['y-axis-0'].maxanchor 的位置都设置为 align,我正在尝试向 end 添加 100 个。

请帮助我设置 ctx.chart.scales['y-axis-0'].max + 100 的值,即取 ctx.chart.scales['y-axis-0'].max 的当前值并加 100。

这样做的原因是:标签移动到条形图之外,无法看到。增加最大值将有助于显示标签。

 createChart(chartId, chartType, chartData, options = null) {
                    var ctx = document.getElementById(chartId);
                    return new Chart(ctx, {
                        type: chartType,
                        data:
                        {
                            labels: ["Not Attempted", "Fail", "Pass"],
                            datasets: [
                                {
                                    backgroundColor: ["lightgray", "#ff8175", "#84efa5"],
                                    data: [app.others, app.fail, app.pass]
                                }
                            ]
                        },
                        options: options
                    });
                },
                createMonthlyBarChart() {

                    var _max = 0;
                    var chartOptions = {
                        plugins: {
                            datalabels: {
                                anchor: 'end',
                                align: 'end',
                                formatter: (value, ctx) => {
                                    _max = ctx.chart.scales['y-axis-0'].max;
                                    var sum = 0;
                                    ctx.chart.data.datasets[0].data.map(data => { sum += data; });
                                        return value + " (" + (value * 100 / sum).toFixed(1) + "%)";
                                }
                            }
                        },
                        scales: {
                            yAxes: [{
                                ticks: {
                                    min: 0,
                                    max: _max + 10 //this does not work.
                                }
                            }]
                        }

                    }

                    app.monthlyBarChart = app.createChart('monthlyBarChart', 'bar', chartData, chartOptions);
    

0 个答案:

没有答案