Не удается увеличить размер шрифта в гистограмме Google

Question

Не удается увеличить размер шрифта в гистограмме Google

1

У меня есть следующий макет гистограммы. Довольно просто, за исключением того, что я не могу увеличить размер шрифта на оси X. Я предполагаю, что я делаю что-то неправильно с hAxis или просто использую неправильный вариант.

<script src="Chart.Bundle.min.js" type="text/javascript"></script>

...

<canvas id="myChart" height="220" ></canvas>
<script>
    var ctx = document.getElementById("myChart").getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Break','Lunch','Meeting','Aux Out','Aux In'],
            datasets: [{                    
                data: [20, 20, 20, 20, 20],
                backgroundColor: [
                    'rgba(66, 244, 98, 0.9)',
                    'rgba(101, 3, 96, 0.9)',
                    'rgba(198, 192, 194, 0.9)',
                    'rgba(43, 136, 234, 0.9)',
                    'rgba(232, 11, 55, 0.9)'

                ],
                borderColor: [
                    'rgba(57,214,86,1)',
                    'rgba(81, 2, 77, 1)',
                    'rgba(145, 140, 141, 1)',
                    'rgba(37, 118, 203, 1)',
                    'rgba(173, 8, 41, 1)'

                ],
                borderWidth: 2
            }]
        },
        options: {                          
            responsive: true,
            legend : {
                display: false,

            },
            hAxis: {
                textStyle: {
                    fontSize: 32
                }
            }
        }
    });             
    </script>
    </div>

vSteve 17 окт. 2018, в 04:26

Источник

Теги:

javascript

chart.js

charts

bar-chart

1 ответ

Ещё вопросы

WhiteHat · Answer 1 · 2018-10-17T08-50-00.000Z

во-первых, вы используете chart.js, а не диаграммы google

для chart.js, размер шрифта по оси x для оси выглядит следующим образом...

        scales: {
            xAxes: [{
                ticks: {
                    fontSize: 40
                }
            }]
        }

см. следующий рабочий фрагмент...

$(document).ready(function() {
    var ctx = document.getElementById("myChart").getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Break','Lunch','Meeting','Aux Out','Aux In'],
            datasets: [{
                data: [20, 20, 20, 20, 20],
                backgroundColor: [
                    'rgba(66, 244, 98, 0.9)',
                    'rgba(101, 3, 96, 0.9)',
                    'rgba(198, 192, 194, 0.9)',
                    'rgba(43, 136, 234, 0.9)',
                    'rgba(232, 11, 55, 0.9)'

                ],
                borderColor: [
                    'rgba(57,214,86,1)',
                    'rgba(81, 2, 77, 1)',
                    'rgba(145, 140, 141, 1)',
                    'rgba(37, 118, 203, 1)',
                    'rgba(173, 8, 41, 1)'

                ],
                borderWidth: 2
            }]
        },
        options: {
            responsive: true,
            legend : {
                display: false,
            },
            scales: {
                xAxes: [{
                    ticks: {
                        fontSize: 18
                    }
                }]
            }
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="myChart"></canvas>

Извините за путаницу. Я использовал Google в моем последнем проекте. Помогает, когда вы используете правильную документацию.