Chart.js折線圖在頂部被截斷？

對於某些reasone，所有圖都以最高值截斷。我該如何解決這個問題？我不能使用一個固定的y-軸Chart.js折線圖在頂部被截斷？

2016-06-08 nourdin

你有小提琴：

另一種解決方法是在這個bug票的評論1描述？ – phreakv6

你用什麼來創建圖表？你試圖解決什麼問題？請創建一個片段（在這裏解釋https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/）以顯示您的代碼。 –

@nourdin你有沒有得到一個解決這個？我也遇到了它。 –

我發現這個同時使線圖形，具有在頂部顯示的圖例。唯一的解決辦法我發現了傳說移至底部

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

fiddle

來源

2016-06-08 15:07:12 Quince

編輯/更新：正如評論所說，5px的值可以更準確地只是什麼的一半您線寬值是，我相信默認是2px，所以在這種情況下，你只需要填充：{top：1}

有一個layout.padding屬性，你可以在options或global中設置。我有同樣的問題，並設置

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

工作得很好，我不切斷線 http://www.chartjs.org/docs/#chart-configuration-layout-configuration

來源

2016-12-20 10:10:22 sean6bucks

是的，這對我很有用。我已經切斷了極地面積圖的問題，填充畫布沒有做任何事情。填充佈局，因爲您在此處聲明已解決問題。接得好！ – wrkyle

這沒有幫助，它只是將整個圖形向下推動5px。 – RocketR

@RocketR我想更清楚一點，默認線寬是2（px），但它將線放在中間，所以如果你的圖表達到100％，那麼1px就會被截斷。所以也許更準確的解決方案是頂部=你的borderWidth值的一半; – sean6bucks

我使用硬編碼，在頂部和底部稍稍偏出繪製區域。此代碼基於原始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(); 
};

來源

2017-09-19 14:54:26

我也遇到了這個Chart.js錯誤。

最近的修復程序顯示爲here。你不得不手動編輯chart.js之文件src/controllers/controller.line.js （角度2，此文件路徑將位於目錄裏面node_modules/chart.js/。）

或者只是等待下一次chart.js之版本將很可能含有修復。 https://github.com/chartjs/Chart.js/issues/4202

來源

2017-11-15 11:18:16 holg3r

Chart.js折線圖在頂部被截斷？

回答

相關問題