angular - Chart.js,增加图表宽度时增加条形及其标签之间的空间
问题描述
我目前正在测试bar
ChartType 表单 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
推荐阅读
- apache - .htaccess 隐藏文件扩展名
- python - Scikit 学习 train_test_split 成 Pytorch Dataloader
- javascript - Javascript 上的 Tableau API 和 Scrollama。如何使 Tableau 图形显示在固定侧?
- .net-5 - 将 Serilog 日志文件路径更改为更高级别的目录
- javascript - “使用非空参数调用了新的 NativeEventEmitter()`。”警告 TTS 包 - RN
- javascript - React Hook setState function not updating value
- bash - curl:(3) URL 使用错误/非法格式或缺少 URL - 检查响应代码
- vue.js - Nuxt 致命错误 - 在“..\routes\index.js”中找不到模块“@/helper/consts.js”
- javascript - 如何在 NodeJS 中动态读取环境变量键和值
- python - 在 Python 中绘制数组 - 怎么做?