javascript - 如何移动chartJs图例左侧并更改图表的宽度和高度?
问题描述
.html
<p-chart type="bar"></p-chart>
.TS 我已经添加了配置部分
config: [{
legend: {display: true, position: 'right'},
responsive: false,
},
我想删除我用红色箭头显示的空间。我想获得一点左侧图表图例并想更改图表的宽度和高度
解决方案
两件事,图表的配置选项采用对象而不是数组,图例配置也已移至插件部分,因此您将获得以下信息:
config: {
responsive: true,
plugins: {
legend: {
position: 'right'
}
}
}
纯js示例:
var options = {
type: 'pie',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [
{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1,
backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
}
]
},
options: {
plugins: {
legend: {
position: 'right'
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.3.0/chart.js"></script>
</body>
推荐阅读
- ios - 设置 > iCloud > 管理存储应用信息
- highcharts - Highcharts 导出服务器不服务两个并行请求
- c++ - 超过时限
- java - 我正在尝试使用不同类中的方法,但它会产生错误
- unix - Unix将所有文件从主目录移动到另一个文件夹
- python - 气流:ExternalTaskSensor 无法按预期工作。不同的任务计划
- node.js - 挂钩 assert.* 函数
- rust - 产生数量合理的 Tokio 任务
- flutter - Flutter GeoLocator PermissionRequestInProgressException
- security - 如何使用实例给出的相同 access_token 在画布 lms 中保护我的 lti 工具?