-2

我使用 Angular9 和 ng2 图表创建了一个仪表板应用程序。该应用程序能够在 Gridster 布局上拖放图表并创建在主页中加载的仪表板。

ng2 图表通过图表选项设置为 responsive true，除了在小屏幕上外，它都可以正常工作。

我在小屏幕上有以下问题

  1. Gridster 设置为移动响应式，因此在小屏幕中它会移除网格布局并堆叠项目。图表重叠。

  2. 图例和标签占据了所有空间，图表要么非常小，要么根本不可见。

我认为以下步骤将解决此问题。

  1. 设置小屏幕的画布高度。我无法在画布 html 中设置高度，因为这些图表被拖放并且仪表板小部件是交互式创建的。有没有办法只在小屏幕上设置画布高度？

  2. 有没有办法只在小屏幕上隐藏图例

  3. 有没有办法在小屏幕上将标题的字体大小更改为更小的字体。

     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">

请指教。

在此先感谢

4

1 回答 1

0

您可以使用三元运算符作为选项来检查您是否在小屏幕上，如果您使用可编写脚本的选项，则每次屏幕大小更改时都会重新评估它们，对于画布的高度，您可以使用基本的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/

于 2021-08-05T14:28:20.933 回答