Question

对于某些原因，所有图表都以最高值被截断。我怎样才能解决这个问题？我无法使用固定的y轴

Answer 1

编辑/更新：正如评论中所提到的，5px值可以更精确地只是你的线宽值的一半，我相信默认是2px所以在这种情况下你只是想要填充：{top：1}

您可以在options或global中设置layout.padding属性。我有同样的问题并设置

options: {
  layout: {
    padding: {
      top: 5
    }
  },
  ...
}

对我来说没有切断线 http://www.chartjs.org/docs/#chart-configuration-layout-configuration

Answer 2

我使用的是硬编码，只是在顶部和底部有宽的绘图区域。此代码基于原始Chart.canvasHelpers.clipArea。

const WIDE_CLIP = {top: 2, bottom: 4};

Chart.canvasHelpers.clipArea = function(ctx, clipArea) {
    ctx.save();
    ctx.beginPath();
    ctx.rect(
      clipArea.left,
      clipArea.top - WIDE_CLIP.top,
      clipArea.right - clipArea.left,
      clipArea.bottom - clipArea.top + WIDE_CLIP.bottom
    );
    ctx.clip();
};

Answer 3

我在创建顶部显示图例的折线图时发现了这一点。我发现的唯一工作是将图例移到底部

options: {
    legend: {
       position: 'bottom',
    },
}

fiddle

Answer 4

我也遇到了这个Chart.js错误。

显示了最近的修复程序here。您必须手动编辑Chart.js文件src/controllers/controller.line.js （对于Angular 2，此文件路径将位于目录node_modules/chart.js/内。）

或者只是等待下一个很可能包含修复的Chart.js版本。

此错误提示的注释1中描述了另一种解决方法： https://github.com/chartjs/Chart.js/issues/4202

Answer 5

options.layout.padding.top解决方案对我不起作用（仅在行剪切之后添加了填充），因此我从数据中提取了 high / low 值，并使用了{{1 }}和suggestedMin配置参数，如下所示：

suggestedMax

Answer 6

我将数据值存储在数组中。所以我这样设置最大值和最小值：

  <div class="row">
    <h1>Max Date</h1>
    <div class="col-xs-12 col-12 col-sm-6 col-md-4 form-group">
      <input class="form-control"
             placeholder="Datepicker"
             ngModel
             bsDatepicker
             [minDate]="minDate"
             [maxDate]="maxDate">
    </div>
    <div class="col-xs-12 col-12 col-sm-6 col-md-4 form-group">
      <input class="form-control"
             placeholder="Daterangepicker"
             ngModel
             bsDaterangepicker
             [minDate]="minDate"
             [maxDate]="maxDate">
    </div>
  </div>

而且您可以设置

var _array = [1,3,2];
var suggestedMin = Math.max.apply(Math,_array); // 3
var suggestedMax = Math.min.apply(Math,_array); // 1

它有效，谢谢。

Answer 7

此问题已在Chart.js库中修复。只需对其进行更新，就可以了。

Chart.js折线图在顶部被截断？

7 个答案: