chartjs - 圖表區域的頂部和底部填充

Question

我需要在圖表區域上方和下方添加更多空間（接近頂部和底部比例）。 似乎只有向垂直軸添加填充的功能。根據文檔 我禁用刻度線： http://www.chartjs.org/docs/#scales：

Chart.defaults.scale.gridLines.drawTicks = false; 

chartjs圖表區域的頂部和底部內邊距圖像：

此外到垂直軸刻度標籤我可以添加填充（蜱）

Chart.defaults.scale.ticks.padding = 15; 

如何在頂部刻度上添加填充和b發出一個底部（零）的比例？

Answer 1

有幾種方法可以控制chart.js中尺度/圖例之間的填充（文檔中記錄了一些官方方式和其他地方描述的某些「哈希」方式）。問題是，沒有辦法使用現有配置選項來控制整個圖表中的填充（左側比例，下側比例，頂部比例或圖例底部等）。

幸運的是，由於靈活的chart.js接口（並且因爲我們可以創建新的縮放類型等），所以仍然可以控制填充而不用太多大驚小怪。讓我解釋一下添加左邊，頂部和底部填充的方法，然後在末尾提供一個工作示例（如果您願意，可以跳過）。

左填充

這一個是容易的。有一個記錄的選項來控制這個。只需將scales.yAxes.ticks.padding選項設置爲您想要的值即可。這是一個例子。

scales: { 
    yAxes: [{ 
    ticks: { 
     beginAtZero: true, 
     padding: 25, 
    } 
    }] 
} 

的頂部填充（或傳說填充）

沒有選項來控制這個，所以我們必須建立它。我建立了它在創造新的傳奇對象和覆蓋afterFit()功能使用在選項對象上設置的paddingBottom選項。這不是太困難，但需要周圍的方式來做到這一點。這是相關的代碼。

function getBoxWidth(labelOpts, fontSize) { 
    return labelOpts.usePointStyle ? 
    fontSize * Math.SQRT2 : 
    labelOpts.boxWidth; 
}; 

Chart.NewLegend = Chart.Legend.extend({ 
    afterFit: function() { 
    this.height = this.height + this.options.paddingBottom; 
    }, 
}); 

function createNewLegendAndAttach(chartInstance, legendOpts) { 
    var legend = new Chart.NewLegend({ 
    ctx: chartInstance.chart.ctx, 
    options: legendOpts, 
    chart: chartInstance 
    }); 

    if (chartInstance.legend) { 
    Chart.layoutService.removeBox(chartInstance, chartInstance.legend); 
    delete chartInstance.newLegend; 
    } 

    chartInstance.newLegend = legend; 
    Chart.layoutService.addBox(chartInstance, legend); 
} 

// Register the legend plugin 
Chart.plugins.register({ 
    beforeInit: function(chartInstance) { 
    var legendOpts = chartInstance.options.legend; 

    if (legendOpts) { 
     createNewLegendAndAttach(chartInstance, legendOpts); 
    } 
    }, 
    beforeUpdate: function(chartInstance) { 
    var legendOpts = chartInstance.options.legend; 

    if (legendOpts) { 
     legendOpts = Chart.helpers.configMerge(Chart.defaults.global.legend, legendOpts); 

     if (chartInstance.newLegend) { 
     chartInstance.newLegend.options = legendOpts; 
     } else { 
     createNewLegendAndAttach(chartInstance, legendOpts); 
     } 
    } else { 
     Chart.layoutService.removeBox(chartInstance, chartInstance.newLegend); 
     delete chartInstance.newLegend; 
    } 
    }, 
    afterEvent: function(chartInstance, e) { 
    var legend = chartInstance.newLegend; 
    if (legend) { 
     legend.handleEvent(e); 
    } 
    } 
}); 

底部填充，

也沒有選項來控制這一點，所以我們必須在還建立它。因爲我們這裏處理的比例，要做到這一點的最好辦法是擴大「類別」比例，並添加邏輯來處理比例paddingTop選項。閱讀源代碼後，我們需要覆蓋draw()函數來完成此操作。這是相關的代碼（請參閱我的示例以瞭解完整實現）。

// ... 
if (isHorizontal) { 
    if (options.position === 'bottom') { 
    // bottom 
    textBaseline = !isRotated? 'top':'middle'; 
    textAlign = !isRotated? 'center': 'right'; 
    labelY = me.top + tl + me.options.paddingTop; 
    } else { 
    // top 
    textBaseline = !isRotated? 'bottom':'middle'; 
    textAlign = !isRotated? 'center': 'left'; 
    labelY = me.bottom - tl; 
    } 
} 
// ... 

這裏是在這一切放在一起codepen example。