我使用Angular9和ng2图表创建了一个仪表板应用程序。该应用程序能够在Gridster布局上拖放图表，并创建在主页中加载的仪表板。
ng2图表通过图表选项设置为响应true，它工作得很好，除了小屏幕。
我在小屏幕上有以下问题
-
Gridster设置为移动响应，因此在小屏幕中它删除网格布局和堆叠的物品。这些图表重叠了。
-
图例和标签占用了所有的空间，图表要么很小，要么不可见。
我想下面的步骤可以解决这个问题。
-
为小屏幕设置画布的高度。我无法在canvas html中设置高度，因为这些图表是拖放的，仪表板小部件是交互式创建的。有没有办法只在小屏幕上设置画布高度?
-
是否有办法只在小屏幕上隐藏图例
-
有没有办法在小屏幕上改变标题的字体大小。
var pieChartOptions: ChartOptions = { responsive: true, plugins: { title: { display: true, font: { size: (ctx) => window.innerWidth > 700 ? 8 : 6 } }, legend: { position: 'right', display: (ctx) => window.innerWidth > 700, labels: { fontSize: 6, usePointStyle: true } } };
这个图表选项作为输入发送给具有html
的图表组件。<canvas baseChart width="2" height="1"
[datasets]="ChartData"
[labels]="ChartLabels"
[options]="ChartOptions"
[legend]="ChartLegend"
[chartType]="ChartType"
[plugins]="ChartPlugins">
请建议。
提前感谢sresree
你可以使用三元运算符选项来检查你是否在一个小屏幕上，如果你使用脚本选项，他们会重新评估每次屏幕大小的变化，对于画布的高度，你可以使用基本的CSS媒体查询
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
plugins: {
title: {
display: true,
text: 'title',
font: {
size: (ctx) => window.innerWidth > 700 ? 24 : 12
}
},
legend: {
display: (ctx) => window.innerWidth > 700
}
}
}
}
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.5.0/chart.js"></script>
</body>调整大小:https://jsfiddle.net/Leelenaleee/2bde1mph/3/