[英]How to change Chart.js horizontal bar chart Width?
我試圖通過Chartjs.Horizontal稀釋器生成條形圖 。
我嘗試更改calculateBarWidth
以從傳入的options對象返回一個值。
當這不起作用時,我嘗試硬編碼一個值以返回calculateBarWidth
(下面的代碼)。 但是,這也不起作用。
在解決這個問題時我還有其他途徑可以探索嗎?
Chart.Type.extend({
name: "HorizontalBar",
defaults : defaultConfig,
initialize: function(data){
//Expose options as a scope variable here so we can access it in the ScaleClass
var options = this.options;
this.ScaleClass = Chart.Scale.extend({
offsetGridLines : true,
calculateBarX : function(datasetCount, datasetIndex, barIndex){
var xWidth = this.calculateBaseWidth(),
xAbsolute = this.calculateX(barIndex) - (xWidth/2),
barWidth = this.calculateBarWidth(datasetCount);
return xAbsolute + (barWidth * datasetIndex) + (datasetIndex * options.barDatasetSpacing) + barWidth/2;
},
calculateBaseWidth : function(){
return (this.calculateX(1) - this.calculateX(0)) - (2*options.barValueSpacing);
},
calculateBarWidth : function(datasetCount){
return 10;
},
// rest of code
只需覆蓋buildScale
方法,一旦創建了scale對象,就可以使用它。
預習
腳本
Chart.types.HorizontalBar.extend({
name: "HorizontalBarAlt",
initialize: function(data){
var originalBuildScale = this.buildScale;
var chart = this;
chart.buildScale = function() {
var r = originalBuildScale.apply(this, arguments);
chart.scale.calculateBarHeight = function() {
return 10;
}
return r;
}
Chart.types.HorizontalBar.prototype.initialize .apply(this, arguments);
}
});
您可以在選項對象中設置它。
var options =
{
scales:
{
yAxes: [
{
barPercentage: 0.3
}]
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.