小编Bor*_* B.的帖子

如何根据数据集大小动态设置ChartJs折线图宽度?

我正在使用 ChartJS (v2.1) 创建折线图。我没有固定大小的数据集,我希望折线图根据数据集的大小调整其宽度:

大数据集: 在此输入图像描述

较小的数据集: 在此输入图像描述

我希望大数据集使图表更宽(而不是缩小到可用宽度)。显示水平滚动条是一个选项,但我无法指定图表的宽度,因为我不知道数据集有多大。

是否有选项可以设置 X 轴刻度之间的最小宽度?或者自动增长图表?我尝试实现这个问题的解决方案,但我无法在设计时确定宽度。

我的标记:

<div class="chartWrapper">
   <canvas id="f1-chart" class="chart chart-line" chart-data="f1Data" chart-labels="f1Labels" chart-series="f1Series" chart-options="f1Options"></canvas>        
</div>
Run Code Online (Sandbox Code Playgroud)

和图表选项:

scope.f1Options = {              
    legend: false,     
    responsive: true,            
    maintainAspectRatio: false
}
Run Code Online (Sandbox Code Playgroud)

css chart.js chart.js2

6
推荐指数
1
解决办法
4881
查看次数

标签 统计

chart.js ×1

chart.js2 ×1

css ×1