由于某些原因,所有的图形都在最高值处被截断。我该如何解决这个问题?我不能使用固定的y轴
xggvc2p61#
**编辑/更新:**正如在评论中提到的,5 px值可以更准确地说只是你的线宽值的一半,我相信默认值是2 px,所以在这种情况下,你只需要填充:{顶部:1 }
这里有一个layout.padding属性,你可以在选项或全局中设置。我遇到了同样的问题,并设置
options: { layout: { padding: { top: 5 } }, ... }
对我来说,没有切断线路是很好的工作http://www.chartjs.org/docs/#chart-configuration-layout-configuration
nle07wnf2#
我使用硬编码,只是在顶部和底部的宽绘图区域。这个代码基于原始的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(); };
5w9g7ksd3#
你可以试试clip:false选项,对我管用。示例:
clip:false
options: { clip: false, responsive: true, interaction: { intersect: false, mode: 'index', } }
wlwcrazw4#
我在制作顶部显示图例的线图时发现了这一点。我发现的唯一工作是将图例移到底部
options: { legend: { position: 'bottom', }, }
fiddle
wj8zmpe15#
我也遇到了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
src/controllers/controller.line.js
node_modules/chart.js/
h7appiyu6#
options.layout.padding.top解决方案对我不起作用(只是在剪切线后添加了填充),所以我从数据中提取了高/低值,并使用了suggestedMin和suggestedMax配置参数,如下所示:
options.layout.padding.top
suggestedMin
suggestedMax
var suggestedMin = {MIN}; var suggestedMax = {MAX}; options: { scales: { yAxes: [{ ticks: { suggestedMin: suggestedMin - 1, suggestedMax: suggestedMax + 1, } }] } }
evrscar27#
此问题已在Chart.js库中得到修复。只需更新它,您就可以解决此问题。
41ik7eoe8#
我把数据值存储在数组中,所以我把最大值和最小值设置成这样:
var _array = [1,3,2]; var suggestedMax = Math.max.apply(Math,_array); // 3 var suggestedMin = Math.min.apply(Math,_array); // 1
而比你能集
options: { scales: { yAxes: [{ ticks: { beginAtZero: false, suggestedMin: suggestedMin - 1, suggestedMax: suggestedMax + 1, } }] } }
而且很管用,谢谢。
8条答案
按热度按时间xggvc2p61#
**编辑/更新:**正如在评论中提到的,5 px值可以更准确地说只是你的线宽值的一半,我相信默认值是2 px,所以在这种情况下,你只需要填充:{顶部:1 }
这里有一个layout.padding属性,你可以在选项或全局中设置。我遇到了同样的问题,并设置
对我来说,没有切断线路是很好的工作http://www.chartjs.org/docs/#chart-configuration-layout-configuration
nle07wnf2#
我使用硬编码,只是在顶部和底部的宽绘图区域。这个代码基于原始的Chart.canvasHelpers.clipArea。
5w9g7ksd3#
你可以试试
clip:false
选项,对我管用。示例:
wlwcrazw4#
我在制作顶部显示图例的线图时发现了这一点。我发现的唯一工作是将图例移到底部
fiddle
wj8zmpe15#
我也遇到了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
h7appiyu6#
options.layout.padding.top
解决方案对我不起作用(只是在剪切线后添加了填充),所以我从数据中提取了高/低值,并使用了suggestedMin
和suggestedMax
配置参数,如下所示:evrscar27#
此问题已在Chart.js库中得到修复。只需更新它,您就可以解决此问题。
41ik7eoe8#
我把数据值存储在数组中,所以我把最大值和最小值设置成这样:
而比你能集
而且很管用,谢谢。