2017-02-17 83 views
0

我创建了这个小提琴。它包含一个ChartJS条形图:CharJS 2.5.0 - 如何删除酒吧之间的空间

https://jsfiddle.net/07pzys9t/

 var options = { 
     legend: { display: false }, 
     animation: { 
      animateScale: true 
     }, 
     scales: { 
      xAxes: [{ 
       barPercentage: 1, 
       categoryPercentage: 1, 
       barThickness : 45 
      }], 
      yAxes: [{ 
       barPercentage: 1, 
       categoryPercentage: 1, 
       ticks: { 
        beginAtZero: true 
       } 
      }] 
     }, 
     tooltips: { 

     } 
    }; 
    var dataForChart = { 
     datasets: [{ 
      data: [0.2, 0.4, .78, 0.05], 
      backgroundColor:["#FF6384","#4BC0C0","#FFCE56","#36A2EB"], 
      borderWidth: 0 
     }], 
     labels: ['1', '2', '3', '4'] 
    }; 
    var chart = new Chart($("#statsRenderingResultsDeliveryClaimsChart"), { 
     type: 'bar', 
     data: dataForChart, 
     options: options 
    }); 

我如何删除条之间的空间?我读了这个答案:

Chart.js Bar Chart: How to remove space between the bars in v2.3?

但它似乎没有,如果你看一下我创建我补充两轴的barPercentagecategoryPercentage性能小提琴的代码,因为工作。

关于如何实现想要的行为的任何想法?

感谢您的关注。

回答

0

如果您在响应方面使用图表,则不会强制将宽度值强制为您的酒吧。

你只需要这方面的两个属性

xAxes: [{ 
    barPercentage: 1.0, 
    categoryPercentage: 1.0 
}] 

而不是设置您的xAxes:

xAxes: [{ 
    barPercentage: 1, 
    categoryPercentage: 1, 
    barThickness : 45 
}] 

您需要使用百分比值使用barPercentage和categoryPercentage属性响应方面。