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

我想用chart .js绘制一个水平条形图，但它一直在缩放图表，而不是使用我从脚本中分配的画布的高度。

有没有办法从脚本中设置图形的高度?

参见关于小提琴的代码:Jsfiddle

当前回答

你应该为canvas元素使用html height属性:

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

2020-04-19 11:23:43

其他回答

只是补充一下@numediaweb给出的答案

如果你在按照说明设置maintainAspectRatio=false后，会把头撞到墙上:我最初从一个网站上获得的使用图表.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中定义它的高度。

一旦你这样做了，图表应该有响应的宽度和固定的高度。

2018-09-26 20:40:07

对于react，这样做是有效的:

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

2022-01-08 14:23:07

这里的问题是maintainAspectRatio需要在options节点内，而不是在示例中的同一级别。

2022-02-23 18:20:44

需要图表100%填充父元素，而不是手动设置高度，问题是强制父div总是填充剩余空间。

在设置响应和比率选项后(查看相关的chartjs文档)，下面的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;
  }
}

2019-11-20 03:38:05

你应该为canvas元素使用html height属性:

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

2020-04-19 11:23:43

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

推荐文章

最新文章

标签