图表js图表未显示在角度材料选项卡内答案

【问题标题】：chart js chart is not displaying inside angular material tabs图表js图表未显示在角度材料选项卡内
【发布时间】：2020-05-07 04:29:09
【问题描述】：

我正在尝试在选项卡（角度材料）内显示图表 js 折线图，但图表没有显示，它显示为空。

这是我的代码：

HTML：

 <mat-tab-group animationDuration="0ms">
   <mat-tab label="First">
     <div class="chart-container" style="height:50vh;">
          <canvas id="demo"></canvas>
     </div>
   </mat-tab>
   <mat-tab label="Second">Content 2</mat-tab>
   <mat-tab label="Third">Content 3</mat-tab>
 </mat-tab-group>

js文件：

  var chartColors = {
    test_1: '#fba66c',
    test_2: '#86b9ce',
    test_3: '#4274fd'
  };

  var canvas : any = document.getElementById("demo");
  var ctx = canvas.getContext("2d");

  var test_1_data = [1, 0, 3, 0, 5, 6, 8];
  var test_2_data = [5, 1, 8, 0, 3, 6, 5];
  var test_3_data = [9, 8, 3, 4, 5, 6, 2];
  var lineChartData = {
  labels: ['Mon', 'Tue', 'Wed', 'Thu','Fri', 'Sat', 'Sun'],
  datasets: [{

     label: 'test_1',
     borderColor: chartColors.test_1,
     backgroundColor: chartColors.test_1,
     fill: false,
     data: test_1_data ,
     yAxisID: 'y-axis-1'
  },
  {
    label: 'test_2',
    borderColor: chartColors.test_2,
    backgroundColor: chartColors.test_2,
    fill: false,
    data: test_2_data ,
    yAxisID: 'y-axis-1'
 },
{
  label: 'test_3',
  borderColor: chartColors.test_3,
  backgroundColor: chartColors.test_3,
  fill: false,
  data: test_3_data ,
  yAxisID: 'y-axis-1'
 }
 ]
 };

  var demo= Chart.Line(ctx, {
    data: demolineChartData,
    options: {
        responsive: true,
        hoverMode: 'index',
        stacked: false,
        maintainAspectRatio: false,
        title: {
            display: true,
            text: 'Last updated at  : '+ new Date().toLocaleString()
        },
        scales: {
            yAxes: [{
              ticks:{
                  min: 0,
                  max:15,
                  stepSize:3
                },
                type: 'linear',
                position: 'left',
                id: 'y-axis-1'
              }],
        }
    }
});

我使用了 angular material 中的标签和图表 js 中的图表。我尝试了很多方法，但没有任何效果，我该怎么做。

提前致谢。

【问题讨论】：

标签： javascript html angular charts angular-material

【解决方案1】：

您应该将图表初始化为 ngOnInit 方法。您可以创建一个实例化图表的函数：

chart.ts：

export const myChart = () => {
   var chartColors = {
    test_1: '#fba66c',
    test_2: '#86b9ce',
    test_3: '#4274fd'
  };

  var canvas : any = document.getElementById("demo");
  var ctx = canvas.getContext("2d");

  var test_1_data = [1, 0, 3, 0, 5, 6, 8];
  var test_2_data = [5, 1, 8, 0, 3, 6, 5];
  var test_3_data = [9, 8, 3, 4, 5, 6, 2];
  var lineChartData = {
  labels: ['Mon', 'Tue', 'Wed', 'Thu','Fri', 'Sat', 'Sun'],
  datasets: [{

     label: 'test_1',
     borderColor: chartColors.test_1,
     backgroundColor: chartColors.test_1,
     fill: false,
     data: test_1_data ,
     yAxisID: 'y-axis-1'
  },
  {
    label: 'test_2',
    borderColor: chartColors.test_2,
    backgroundColor: chartColors.test_2,
    fill: false,
    data: test_2_data ,
    yAxisID: 'y-axis-1'
 },
{
  label: 'test_3',
  borderColor: chartColors.test_3,
  backgroundColor: chartColors.test_3,
  fill: false,
  data: test_3_data ,
  yAxisID: 'y-axis-1'
 }
 ]
 };

  var demo= Chart.Line(ctx, {
    data: demolineChartData,
    options: {
        responsive: true,
        hoverMode: 'index',
        stacked: false,
        maintainAspectRatio: false,
        title: {
            display: true,
            text: 'Last updated at  : '+ new Date().toLocaleString()
        },
        scales: {
            yAxes: [{
              ticks:{
                  min: 0,
                  max:15,
                  stepSize:3
                },
                type: 'linear',
                position: 'left',
                id: 'y-axis-1'
              }],
        }
    }
  });
}

然后到你的组件中，你导入它：

...
ngOnInit() {
   myChart();
}
...

注意：请记住，您可以直接将 chart.js 库导入到您的组件中，然后使用它。

希望工作流程对您有所帮助。

【讨论】：

我试过了，但还是无法显示图表

【解决方案2】：

对我来说，解决方案是使用 matTabContent 指令将选项卡内容包装在 ng-template 中，就像绘制魔术图一样。

<mat-tab-group animationDuration="0ms">
  <mat-tab label="First">
    <ng-template matTabContent>
      <div class="chart-container" style="height: 50vh">
        <canvas id="demo"></canvas>
      </div>
    </ng-template>
  </mat-tab>
  <mat-tab label="Second">
    <ng-template matTabContent> Content 2 </ng-template>
  </mat-tab>
  <mat-tab label="Third">
    <ng-template matTabContent> Content 3 </ng-template>
  </mat-tab>
</mat-tab-group>

【讨论】：