我想用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 ctx = $('#myChart');返回元素列表。您需要使用ctx[0]引用第一个。 高度也是一个属性,而不是函数。

我在代码中是这样做的:

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

其他回答

这个对我很有用:

我从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,

最简单的方法是为画布创建一个容器,并设置它的高度:

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

并设置

options: {  
    responsive: true,
    maintainAspectRatio: false
}

如果你在选项中禁用了保持纵横比,那么它将使用可用的高度:

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

设置chartjs图表的大小可以简单地通过设置周围容器的with来实现:

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

但是一个重要的细节是,你可能需要在创建之后调整图表的大小:

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

只是补充一下@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中定义它的高度。

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