在Chart.js中设置图表的高度

2020/11/16 01:22 · javascript ·  · 0评论

我想使用Chart.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
                }
            }]
        }
    }
});

似乎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);

您还可以将尺寸设置为画布

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

然后将响应选项设置为false,以始终将图表保持在指定的大小。

options: {
    responsive: false,
}

您应该将canvas元素的html height属性使用为:

<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;

I created a container and set it the desired height of the view port (depending on the number of charts or chart specific sizes):

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

To be dynamic to screen sizes I set the container as follows:

*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;
    }
}

Of course very important (as have been referred to numerous times) set the following option properties of your chart:

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

Just to add on to the answer given by @numediaweb

万一您将头撞在墙上是因为按照说明进行设置maintainAspectRatio=false:我最初是从一个示例中复制了代码,该示例是我在一个网站上将Chart.js与Angular 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中定义其高度。

完成后,图表应具有响应宽度,但高度应固定。

需要图表填充父元素100%,而不是手动设置高度,问题是迫使父div始终填充剩余空间。

After setting responsive and ratio options (check out related chartjs doc), the following css did the trick:

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;
  }
}
本文地址:http://javascript.askforanswer.com/zaichart-jszhongshezhitubiaodegaodu.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!