![](/img/trans.png)
[英]ng2-charts / chart.js - How to set doughnut/pie chart color on specific labels programatically?
[英]Chart.js, increase space between bars and its labels when increasing the charts width
我目前正在测试 ChartType bar
Chart.js。
这就是我定义测试画布的方式:
<div class="bar-chart">
<canvas
baseChart
[datasets]="[{label: 'Testuser1', data: [0, 15, 0, 0]}, {label: 'Testuser2', data: [10, 0, 10, 0]}, {label: 'Testuser3', data: [15, 0, 0, 12]}]"
[labels]="['Junior Softwaredeveloper', 'Senior Softwaredeveloper', 'Designer']" [chartType]="barChartType"
[options]="options">
</canvas>
</div>
我使用的选项:
export const CHARTOPTIONS_BAR = {
legend: {display: false},
animation: null,
tooltips: {
callbacks: {
label: (tooltipItems, data) => data.datasets[tooltipItems.datasetIndex].label + ': ' + data.datasets[tooltipItems.datasetIndex].data[0] + 'h'
},
},
plugins: {
colorschemes: {
scheme: 'tableau.SuperfishelStone10',
override: true
}
},
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true,
scaleLabel: {
display: true,
labelString: 'Stunden',
fontSize: 18
}
}]
},
responsive: true
};
而父类只是定义了画布响应适应的宽度和高度:
.bar-chart {
width: 400px;
height: 200px;
}
这就是它的样子:
我想增加图表的宽度,以便有足够的空间容纳像Junior Softwaredeveloper
这样的较长文本(水平)。
但是如果我将宽度从 400px 增加到 800px 我得到这个:
因此,它会放大所有内容的纵横比,从而导致图像模糊。 有没有办法增加图表的宽度,然后导致条形之间的空间增加,但保持文本、条形等的纵横比相同?
我基本上只是希望一切都像上图一样。 只需将宽度加倍,而不会影响元素的纵横比。 将宽度加倍应该只是将条形与其标签之间的空间加倍,这将有助于我水平放置较长的文本。
为避免增加图表的模糊效果,您可以定义以下选项。
maintainAspectRatio: false
在单个数据集上定义categoryPercentage
确定每个类别可能占用多少空间。 这样你就可以改变条形之间的空间。
{
categoryPercentage: categoryPct,
label: 'Testuser1',
data: [0, 15, 0, 0]
}
如有必要,您可能还想更改刻度旋转。
xAxes: [{
stacked: true,
ticks: {
minRotation: 20
}
}],
查看我的StackBlitz
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.