Question

我正在尝试Chart.js given in the docs的示例代码。

在画布元素上以400px / 400px内联指定宽度和高度。

但是在渲染图表时，它会被炸成整页宽度，并切断最右端。

我应该如何/在哪里控制图表的宽度/高度？

This is some bogus text because SO prohibits linking to Codepen otherwise.

Answer 1

您可以覆盖画布样式宽度！important ...

canvas{

  width:1000px !important;
  height:600px !important;

}

也

在options ..

下指定responsive:true,属性

options: {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true
            }
        }]
    }
}

在添加的选项下更新：maintainAspectRatio: false,

link：http://codepen.io/theConstructor/pen/KMpqvo

Answer 2

您也可以使用容器（根据官方文档http://www.chartjs.org/docs/latest/general/responsive.html#important-note）

简单地包围图表

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

CSS

.chart-container {
    width: 1000px;
    height:600px
}

和选项

responsive:true
maintainAspectRatio: false

Answer 3

就我而言，在选项下传递responsive: false解决了问题。我不确定为什么每个人都在告诉你做相反的事情，特别是因为默认是真的。

Answer 4

为我工作

responsive:true
maintainAspectRatio: false

谢谢

Answer 5

我不敢相信没有人谈论使用相对父元素。

代码：

<div class="chart-container" style="position: relative; height:40vh; width:80vw">
  <canvas id="chart"></canvas>
</div>

来源：Official documentation

Answer 6

也为我工作

responsive:true
maintainAspectRatio: false


<div class="row">
        <div class="col-xs-12">
            <canvas id="mycanvas" width="500" height="300"></canvas>
        </div>
    </div>

谢谢

Answer 7

上面没有提到，但是也可以在canvas元素上使用max-width或max-height。

Answer 8

以下内容对我有用-但请不要忘记将其放在“选项”参数中。

var myChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
    maintainAspectRatio: false,
    responsive:true,
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
}
});

Answer 9

这对我来说很有帮助：

for(i in 1:4){
  tree=rpart(student.por$romantic[-Groups[,i]]~., data=predictorDat1[-Groups[,i],],control=rpart.control(cp=.001)) 
  predictions_per_fold=predict(tree,type="class",newdata=predictorDat1[Groups[,i],]) ## 
  predictions=c(predictions,as.character(predictions_per_fold))
}

Answer 10

您可以根据需要更改library(devtools) install_github("andrew-hipp/RADami")：

aspectRatio

Answer 11

可以创建一个div来包裹canvas标签，

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

    .grafico{
      width: 400px !important;
    }

js 图表选项的任何变化

var myChart = new Chart(ctx, {
    type: 'bar', //doughnut, bar, line, radar, pie, polarArea
    data: data,
    options: {

      scales: {
        y: {
          beginAtZero: true,
          stepSize: 1
        }

      }
    },
  });
};

Answer 12

使用它，它工作正常。

<canvas id="totalschart" style="height:400px;width: content-box;"></canvas>

并在options下，

responsive:true,

设置宽度和高度

12 个答案: