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填充畫布

回答

相關問題