Chart.js填充画布

我正在使用最新的chart.js库来生成没有缩放的折线图，但存在填充问题，顶部和底部点被切断。我看不到填充画布的任何选项。Chart.js填充画布

我的配置是一样的下面。

var config = { 
    type: 'line', 
    data: { 
     labels: ["January", "February", "March", "April", "May", "June", "July"], 
     datasets: [{ 
      label: "Sales", 
      data: [10, 20, 50, 25, 60, 12, 48], 
      fill: true, 
      lineTension: 0.25, 
      borderColor: "#558aeb", 
      backgroundColor: "#558aeb" 
     }] 
    }, 
    options: { 
     responsive: true, 
     legend: { 
      display: false 
     }, 
     tooltips: { 
      mode: 'label' 
     }, 
     hover: { 
      mode: 'dataset' 
     }, 
     scales: { 
      xAxes: [{ 
       display: false 
      }], 
      yAxes: [{ 
       display: false 
      }] 
     } 
    } 
};

来源

2016-07-27 x-freestyler

我相信你的问题不是填充，但我可能是错的。正如我所看到的，您的问题是自动检测可绘制区域的高度，当您的数据中的最大数字很好且圆整时，如60。尝试查看当最大数量为61,62等问题时问题是否仍然存在。因此，我建议您烹饪您的数据，以免发生此类问题。如果数据烹饪不是一个选项，请尝试明确定义y轴上的最大滴答，以便它仅略高于数据中的最大数量。在你的情况，请尝试使用此：

yAxes: [{ 
    display: false, 
    ticks: { 
     max: 62 
    } 
}]

所以，你需要计算数据的最大数量，并添加小东西，为了明确定义，这将摆脱意外裁剪的最大刻度。有人可以有更好的理解和解决方案，但这是我能想到的选项。那，并且烹饪您的数据，当然。

来源

2016-07-27 18:12:03 xnakos

是的，这解决了上面的截断。我还设置了ticks {min：-5}，并且这个解决方案的底部截止点，但是造成了空的空间。这可以很容易地解决。谢谢 –

@HasanGürsoy;） – xnakos

谢谢你兄弟，你救了我的一天 –

我已经研究过如何使一个修补程序来解决这个问题。我看到了三个奇怪的行为：

1的数据中断，如果有大的变化，例如：

[0, 10, 70, 30, 20, 12, 50, 200, 200, 200, 200, 200]

2-“错误”是我们永远的边框宽度的高度的一半。

3-那个错误，当我们改变core.layoutService.js线36上的下一个COMMIT

在我看到了核心的作用“更新”内的两个奇怪的填充瓦尔第二位可能被引入。 layoutService：

在29行附近，我们有函数，在35行和36行我们有奇怪的变量。

// The most important function 
     update: function(chartInstance, width, height) { 
      if (!chartInstance) { 
       return; 
      } 

      var xPadding = 0; 
      var yPadding = 0;

我已经看到该功能用这个变量做什么，特别是用yPadding。我无法使用yPadding进行任何有用的计算。在我看来，这是问题所在。我们总是保持yPadding为0，恕我直言，这是一个错误适用于该文件的另一个版本在这里。

解决方案如下，我开发的是因为该提交的开发者背后的需求删除了该行。

这是一个修补程序，我会做出PR，如果获得批准，将是解决

如果您应用的代码，你将可以设置你的填充在图表的风格配置，另外，如果你不要应用任何配置，他会根据图表高度进行默认设置。

配置道具例如：

padding: { 
    x: 5, 
    y: 4 
},

你的代码和这里所有的解释：图表的 https://github.com/chartjs/Chart.js/pull/3349

来源

2016-09-22 15:46:07

如果我理解题正确，目前的版本（> 2.4）JS支持填充配置围绕图表布局选项。

layout: { 
    padding: { 
     // Any unspecified dimensions are assumed to be 0      
     top: 25 
    } 
}

Check here

来源

2017-08-25 16:13:17 indusBull

好的答案！它解决了我的问题。 – Codemole

Chart.js填充画布

回答

相关问题