Chart.js에서 차트의 높이를 설정합니다.

Chart.js에서 차트의 높이를 설정합니다.

Chart.js를 사용하여 수평 막대 차트를 그리려고 하는데 스크립트에서 캔버스에 할당한 높이를 사용하는 대신 차트의 크기가 계속 조정됩니다.

스크립트에서 그래프 높이를 설정할 수 있는 방법이 있나요?

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<div class="graph">
  <div class="chart-legend">

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

바이올린 코드 참조: Jsfiddle

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

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
}

것 같다var ctx = $('#myChart');요소 목록을 반환하고 있습니다. 첫 할 때 '아까워서'를 .ctx[0]키는 함수가 아니라 속성입니다.

내 코드로 이렇게 했어

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

캔버스 요소를 부모 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,

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

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

그런 다음 응답 옵션을 false로 설정하여 차트를 항상 지정된 크기로 유지합니다.

options: {
    responsive: false,
}

컨테이너를 생성하여 뷰 포트의 원하는 높이(차트 수 또는 차트별 크기에 따라 다름)를 설정했습니다.

.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,
}

그가 맞아.jQuery를 계속 사용하고 싶다면 다음과 같이 하십시오.

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

또는

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

캔버스 요소의 html 높이 속성은 다음과 같이 사용해야 합니다.

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

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

@numediaweb의 답변에 추가해 주세요.

벽에 머리를 부딪히는 경우, 왜냐하면 지시사항을 따르면maintainAspectRatio=false: 2를 사용하여 Chart

        <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로 정의합니다.

이렇게 하면 차트의 너비는 응답하지만 높이는 고정해야 합니다.

수동으로 높이를 설정하는 것이 아니라 부모 요소를 100% 채우기 위한 차트가 필요했고, 문제는 부모 div가 항상 남은 공간을 채우도록 강요하는 것이었습니다.

응답 옵션과 비율 옵션을 설정한 후(관련된 chartjs 문서를 참조) 다음 css가 문제를 해결했습니다.

html

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

scs:

.panel {
  display: flex;

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

chartjs 다이어그램의 크기를 설정하려면 주변 컨테이너의 를 다음과 같이 설정합니다.

   <div style="width:400px;">
     <canvas id="myChart"></canvas>
   </div>

하지만 한 가지 중요한 세부 사항은resize작성 후의 그림:

var ctx = $('#myChart');
var myChart = new Chart(ctx, {
    ......
    data: {
           ........
    },
    options: {
        responsive: false,
        maintainAspectRatio: true
    }
});
// now resize the new chart to fit into the canvas....
myChart.resize();

여기서의 문제는 maintainAspectRatio가 예시와 같은 수준이 아닌 옵션노드 내에 있어야 한다는 것입니다.

이니셜라이징 스테이트먼트에 오류가 있습니다.maintainAspectRatio는 다음과 같이 options 개체 안에 있어야 합니다.

...

options = {
   maintainAspectRatio: false,

 ...
}

...

이제 차트의 상위 요소의 높이를 설정할 수 있습니다.여기서 div .chart는 div #myChart의 상위 항목입니다.따라서 div.chart의 높이를 지정하면 문제가 없습니다.

다음 코드를 고려합니다.

<div class="chart" style="height: 500px;">
   <canvas id="myChart"></canvas>
</div>

500px면 문제없으니까, 스스로 높이를 변경해 주세요;)

패딩에서 높이가 계산되는 상대 위치 요소(애스펙트 비율과 동일)를 1개 추가합니다만, 이 차트가 특정 최대 높이를 초과하지 않도록 하려면 css의 새로운 강력한 최소 단위를 사용하십시오.또한 이 기능이 지원되지 않는 경우에는 고정 폴백 패딩을 추가합니다.

<div class="dashboard-charts" style="position: relative; padding-top:40%; padding-top:min(40%,530px)">
    <div style="position:absolute;width: 100%;height:100%;left: 0;top: 0">
        <canvas id="sales-dashboard-bar"></canvas>
    </div>
</div>

그리고 나서 javascript 세트의 inside options 오브젝트maintainAspectRatio로.false부모 요소의 높이를 고려하여 사용한다. 이 경우 조부모의 크기에 상대적인 절대 위치 및 크기이다.

var mychart = new Chart(document.getElementById("sales-dashboard-bar"),{
    options: {
        maintainAspectRatio: false,
    }
})

따라서 차트는 최대 높이에 도달할 때까지 가로 세로 비율 2.5로 잘 확장됩니다.530px이 항목을 선택한 후 스케일링을 중지합니다.

리액션의 경우 다음 작업을 수행합니다.

<Doughnut
  data={data}
  height="200px"
  width="200px"
  options={{ maintainAspectRatio: false }}
/>

언급URL : https://stackoverflow.com/questions/41953158/set-height-of-chart-in-chart-js