[英]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.