Установите высоту диаграммы в диаграмме.js

Question

Установите высоту диаграммы в диаграмме.js

Я хочу нарисовать горизонтальную гистограмму с диаграммой.js, но он продолжает масштабировать диаграмму вместо использования высоты, которую я назначаю холсту для сценария.

есть ли способ установить высоту графика из скрипта?

увидеть скрипку: Jsfidle

HTML

<div class="graph">

  <div class="chart-legend">



  </div>

  <div class="chart">

    <canvas id="myChart"></canvas>

  </div>

</div>

JavaScript

var ctx = $('#myChart');



ctx.height(500);



var myChart = new Chart(ctx, {

    type: 'horizontalBar',

    data: {

        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],

        datasets: [{

            label: '# of Votes',

            data: [12, 19, 3, 5, 2, 3],

            backgroundColor: [

                'rgba(255, 99, 132, 0.2)',

                'rgba(54, 162, 235, 0.2)',

                'rgba(255, 206, 86, 0.2)',

                'rgba(75, 192, 192, 0.2)',

                'rgba(153, 102, 255, 0.2)',

                'rgba(255, 159, 64, 0.2)'

            ],

            borderColor: [

                'rgba(255,99,132,1)',

                'rgba(54, 162, 235, 1)',

                'rgba(255, 206, 86, 1)',

                'rgba(75, 192, 192, 1)',

                'rgba(153, 102, 255, 1)',

                'rgba(255, 159, 64, 1)'

            ],

            borderWidth: 1

        }]

    },

    maintainAspectRatio: false,

    options: {

        scales: {

            yAxes: [{

                ticks: {

                    beginAtZero:true

                }

            }]

        }

    }

});

683 7

jQuery javascript chart.js

7 ответов:

Comments

Ничего не найдено.

Riscie · Accepted Answer · 2017-01-31 10:59:27

кажется var ctx = $('#myChart'); возвращает список элементов. Вам нужно будет ссылаться на первый с помощью ctx[0]. Также высота-это свойство, а не функция.

Я сделал это в мой код:
var ctx = document.getElementById("myChart");
ctx.height = 500;

numediaweb · Accepted Answer · 2017-05-02 17:21:29

Если вы отключите поддерживать соотношение сторон в настройках, то он использует доступную высоту:
var chart = new Chart('blabla', {
                type: 'bar',
                data: {
                },
                options: {
                    maintainAspectRatio: false,
                }
            });

bibamann · Accepted Answer · 2018-02-01 10:48:56

самый простой способ-создать контейнер для холста и установить его высоту:
<div style="height: 300px">
  <canvas id="chart"></canvas>
</div>
и установить в опциях:
ответ: правда, maintainAspectRatio: false

illusionist · Accepted Answer · 2017-08-03 18:34:07

Это один работал для меня:

я установил высоту из HTML
canvas#scoreLineToAll.ct-chart.tab-pane.active[height="200"]
canvas#scoreLineTo3Months.ct-chart.tab-pane[height="200"]
canvas#scoreLineToYear.ct-chart.tab-pane[height="200"]
затем я отключил для поддержания соотношения сторон
options: {
  responsive: true,
  maintainAspectRatio: false,

relief.melone · Accepted Answer · 2017-01-31 11:23:21

Он прав. Если вы хотите остаться с jQuery, вы можете сделать это
var ctx = $('#myChart')[0];
ctx.height = 500;
или
var ctx = $('#myChart');
ctx.attr('height',500);

Franz Kiermaier · Accepted Answer · 2018-05-17 13:55:48

установите aspectRatio свойство диаграммы в 0 сделал трюк для меня...

    var ctx = $('#myChart');

    ctx.height(500);

    var myChart = new Chart(ctx, {
        type: 'horizontalBar',
        data: {
            labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
            datasets: [{
                label: '# of Votes',
                data: [12, 19, 3, 5, 2, 3],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        maintainAspectRatio: false,
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }]
            }
        }
    });
myChart.aspectRatio = 0;

Andrew · Accepted Answer · 2018-09-26 23:40:07

просто добавить к ответу, данному @numediaweb

в случае, если вы бьетесь головой о стену, потому что после выполнения инструкции установить maintainAspectRatio=false: Я изначально скопировал свой код из примера, который я получил на веб-сайте с помощью диаграммы.js с угловым 2+:
        <div style="display: block">
          <canvas baseChart
                  [datasets]="chartData"
                  [labels]="chartLabels"
                  [options]="chartOptions"
                  [legend]="chartLegend"
                  [colors]="chartColors"
                  [chartType]="chartType">
          </canvas>
        </div>
чтобы сделать эту работу правильно, вы должны удалить встроенный (и ненужные) style="display: block" вместо этого определите класс для окружающего div и определите его высоту в стиль CSS.

как только вы это сделаете, диаграмма должна иметь отзывчивую ширину, но фиксированную высоту.