我正在生成一个像这样呈现的Chart.JS条形图:
如您所见,图例的底部和网格/图形的顶部被挤在一起。此外,单独的条形物被严格地拼合在一起,使得这些值有点难以阅读;请注意,红色条和蓝色条右侧有足够的空间。象限本身有足够的空间在图例/图形的图例之间添加垫片或空间。
我怎样才能"播出"这些元素使数据更清晰,呈现更具吸引力?
以下是使用的代码:
HTML
<div class="row">
<div class="col-md-6">
<div class="bottomleft">
<h2 class="sectiontext">Forecast/Impact Analysis</h2>
<div class="graph_container">
<canvas id="forecastLineChart"></canvas>
</div>
</div>
</div>
. . .
CSS
&#34; row&#34;和&#34; col-md-6&#34;类是Bootstrap。 &#34; graph_container&#34;必须是Chart.JS类(它不是我的类)。
.bottomleft {
margin-left: 16px;
padding: 16px;
border: 1px solid black;
}
.sectiontext {
font-size: 1.5em;
font-weight: bold;
font-family: Candara, Calibri, Cambria, serif;
color: green;
margin-top: -4px;
}
JAVASCRIPT / jQuery的
var ctxForecastChart = $("#forecastLineChart");
var forecastChartData = {
labels: ["Total Sales"],
datasets: [
{
label: "8/28/2016 - 9/3/2016",
backgroundColor: "rgba(255,0,0,0.75)",
hoverBackgroundColor: "rgba(255,0,0,1)",
data: [1631437.17]
},
{
label: "9/4/2016 - 9/10/2016",
backgroundColor: "rgba(255,153,0,0.75)",
hoverBackgroundColor: "rgba(255,153,0,1)",
data: [1523898.94]
},
{
label: "9/11/2016 - 9/17/2016",
backgroundColor: "rgba(255,255,0,0.75)",
hoverBackgroundColor: "rgba(255,255,0,1)",
data: [1755669.93]
},
{
label: "9/18/2016 - 9/24/2016",
backgroundColor: "rgba(0,255,0,0.75)",
hoverBackgroundColor: "rgba(0,255,0,1)",
data: [1873205.42]
},
{
label: "9/25/2016 - 10/1/2016",
backgroundColor: "rgba(0,0,255,0.75)",
hoverBackgroundColor: "rgba(0,0,255,1)",
data: [1838204.79]
}]
};
var forecastOptions = {
tooltips: {
enabled: true
},
animation: {
duration: 500,
easing: "easeOutQuart",
onComplete: function () {
var ctx = this.chart.ctx;
ctx.font
Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal'
Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
this.data.datasets.forEach(function (dataset) {
for (var i = 0; i < dataset.data.length; i++) {
var model = dataset._meta[Object.keys(dataset._met
[0]].data[i]._model, scale_max = dataset._meta[Object.keys(dataset._met
[0]].data[i]._yScale.maxHeight;
ctx.fillStyle = '#444';
var y_pos = model.y - 5;
if ((scale_max - model.y) / scale_max >= 0.93)
y_pos = model.y + 20;
ctx.fillText(addCommas(dataset.data[i]), model.x
y_pos);
}
});
}
}
};
var forecastBarChart = new Chart(ctxForecastChart, {
type: 'bar',
data: forecastChartData,
options: forecastOptions
});
这不是一个完整的解决方案,但我通过这种方式进行了改进:
<canvas id="forecastLineChart" height="190"></canvas>
IOW,我将高度值添加到画布,以便网格/图形现在更好地填充象限:
它可能会使用逗号来表示y轴的数字,但是这些条可能会更多地横向展开。
答案 0 :(得分:2)
在变量forecastOptions
中,您只需要添加所谓的scales
选项。
var forecastOptions = {
scales: {
xAxes: [{
barPercentage: 0.7,
categoryPercentage: 1
}]
},
tooltips...
这会调整条形(barPercentage
)的宽度以及所有条形的宽度(categoryPercentage
)
您可以将0.7更改为您想要的宽度。所有条形图周围的额外空间是由于它们属于同一类别,并且该选项默认设置为0.8,这意味着5条条形图整体上只占80%。
希望这有帮助