Chart.js에서 차트 높이 설정

Chart.js를 사용하여 가로 막대 차트를 그리려고하지만 캔버스에서 스크립트로 지정한 높이를 사용하는 대신 차트의 배율을 계속 조정합니다.

스크립트에서 그래프의 높이를 설정하는 방법이 있습니까?

바이올린보기 : Jsfidle

HTML

<div class="graph">
  <div class="chart-legend">

  </div>
  <div class="chart">
    <canvas id="myChart"></canvas>
  </div>
</div>

자바 스크립트

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
                }
            }]
        }
    }
});

var ctx = $('#myChart');요소 목록을 반환하는 것 같습니다 . 를 사용하여 첫 번째를 참조해야합니다 ctx[0]. 또한 높이는 함수가 아니라 속성입니다.

내 코드 에서이 방법으로 수행했습니다.

var ctx = document.getElementById("myChart");
ctx.height = 500;

옵션에서 가로 세로 비율 유지를 비활성화하면 사용 가능한 높이가 사용됩니다.

var chart = new Chart('blabla', {
                type: 'bar',
                data: {
                },
                options: {
                    maintainAspectRatio: false,
                }
            });

가장 쉬운 방법은 캔버스의 컨테이너를 만들고 높이를 설정하는 것입니다.

<div style="height: 300px">
  <canvas id="chart"></canvas>
</div>

그리고 설정

options: {  
    responsive: true,
    maintainAspectRatio: false
}

캔버스 요소를 부모 div로 감싸서 상대적으로 배치 한 다음 해당 div에 원하는 높이를 지정하고 옵션에서 MaintainAspectRatio : false를 설정하십시오

//HTML
<div id="canvasWrapper" style="position: relative; height: 80vh/500px/whatever">
<canvas id="chart"></canvas>
</div>

<script>
new Chart(somechart, {
options: {
    responsive: true,
    maintainAspectRatio: false

/*, your other options*/

}
});
</script>

이것은 나를 위해 일했다 :

나는 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,

그가 맞아. jQuery를 유지하려면이 작업을 수행 할 수 있습니다

var ctx = $('#myChart')[0];
ctx.height = 500;

또는

var ctx = $('#myChart');
ctx.attr('height',500);

차트의 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;

canvas 요소에 html height 속성을 다음과 같이 사용해야합니다.

<div class="chart">
    <canvas id="myChart" height="100"></canvas>
</div>

컨테이너를 만들고 차트 수 또는 차트 특정 크기에 따라 원하는 뷰 포트 높이를 설정했습니다.

.graph-container {
width: 100%;
height: 30vh;
}

화면 크기에 동적이되도록 컨테이너를 다음과 같이 설정했습니다.

*Small media devices specific styles*/
@media screen and (max-width: 800px) {
.graph-container {
        display: block;
        float: none;
        width: 100%;
        margin-top: 0px;
        margin-right:0px;
        margin-left:0px;
        height: auto;
    }
}

물론 여러 번 언급 된 것처럼 매우 중요한 것은 option차트 의 다음 속성을 설정하는 것 입니다.

options:{
    maintainAspectRatio: false,
    responsive: true,
}

캔버스에 치수를 설정할 수도 있습니다

<canvas id="myChart" width="400" height="400"></canvas>

그런 다음 반응 형 옵션을 false 로 설정하여 항상 지정된 크기로 차트를 유지하십시오.

options: {
    responsive: false,
}

높이를 수동으로 설정하지 않고 부모 요소를 100 % 채우려면 차트가 필요했으며, 문제는 부모 div가 항상 나머지 공간을 채우도록 강제하는 것이 었습니다.

반응 형 및 비율 옵션을 설정 한 후 (관련 chartjs doc 확인 ) 다음 CSS는 트릭을 수행했습니다.

html

<div class="panel">
  <div class="chart-container">
    <canvas id="chart"></canvas>
  </div>
</div>

scss :

.panel {
  display: flex;

  .chart-container {
    position: relative;
    flex-grow: 1;
    min-height: 0;
  }
}

@numediaweb 의 답변에 추가하기 만하면됩니다.

설정 지침을 따르고 나서 벽에 머리를 대고있는 경우 maintainAspectRatio=false: 나는 원래 Angular 2 +와 함께 Chart.js를 사용하는 웹 사이트의 예제에서 코드를 복사했습니다.

        <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에서 높이를 정의하십시오.

그렇게하면 차트의 너비는 반응하지만 높이는 고정되어야합니다.