Javascript 如何更改Chart.js水平条形图的宽度?
我试图使酒吧所产生的更薄 我尝试更改Javascript 如何更改Chart.js水平条形图的宽度?,javascript,chart.js,Javascript,Chart.js,我试图使酒吧所产生的更薄 我尝试更改calculateBarWidth以从传入的选项对象返回一个值 当这不起作用时,我尝试硬编码一个值以返回到calculateBarWidth(下面的代码)。然而,这也不起作用 在解决这一问题时,我还有其他途径吗 Chart.Type.extend({ name: "HorizontalBar", defaults : defaultConfig, initialize: function(data){ //Expos
calculateBarWidth
以从传入的选项对象返回一个值
当这不起作用时,我尝试硬编码一个值以返回到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
}]
}
}