Angular Charts.js渲染空白画布

Question

我有问题让angular charts.js在我的对话框上工作。首先，我按照这个链接提供的步骤，https://coursetro.com/posts/code/126/Let's-build-an-Angular-5-Chart.js-App --- Tutorial，它是为Angular 5制作的。我只是将测试数据复制到我的角度类阵列。当我运行应用程序时，我的对话框是空白的。我找到了另一个关于charts.js的链接，这是https://dev.to/wiaio/implementing-a-chartjs-line-chart-in-your-angular-application-19d7。我所做的改变是

HTML

<div *ngIf="chart">
        <canvas id="canvas">{{chart}}</canvas>
    </div> 
to 
<canvas #dataChart>{{ chart }}</canvas>

在我的ts代码中

我添加了以下内容

export class ChartComponent implements OnInit {

 @ViewChild('dataChart') private chartRef
  chart: any;
ngOnInit() {

  var temp_max = [279.946, 282.597, 280.15];
  var temp_min = [279.946, 282.597, 278.15];
  var alldates = [1485717216, 1485745061, 1485768552];

  let weatherDates = []

  let jsdate1 = new Date(1485717216 * 1000);
  weatherDates.push(jsdate1.toLocaleTimeString('en', { year: 'numeric', month: 'short', day: 'numeric' }));
  let jsdate2 = new Date(1485745061 * 1000);
  weatherDates.push(jsdate2.toLocaleTimeString('en', { year: 'numeric', month: 'short', day: 'numeric' }));
  let jsdate3 = new Date(1485768552 * 1000);
  weatherDates.push(jsdate3.toLocaleTimeString('en', { year: 'numeric', month: 'short', day: 'numeric' }));

    this.chart = new Chart(this.chartRef.nativeElement, {
      type: 'line',
      data: {
        labels: weatherDates,
        datasets: [
          { 
            data: temp_max,
            borderColor: "#3cba9f",
            fill: false
          },
          { 
            data: temp_min,
            borderColor: "#ffcc00",
            fill: false
          },
        ]
      },
      options: {
        legend: {
          display: false
        },
        scales: {
          xAxes: [{
            display: true
          }],
          yAxes: [{ 
            display: true
          }],
        }
      }
    });
  }

我在离开之前放置了一个断点并检查了this.chart，当我将鼠标悬停在this.chart上时，内容如下。我改变了几次代码。我甚至将图表声明更改为图表：图表但它不起作用。在线示例看起来很直接，但我可以追溯到导致空白对话框的错误。

对大师的任何帮助表示赞赏。谢谢。

_bufferedRender：false _listeners：Object {mousemove：，mouseout :, click：，...} $ plugins：Object {descriptors：Array（3），id：3} animating：true aspectRatio：2 boxes：Array（4）[ChartElement，ChartElement ，ChartElement，...] canvas：canvas.chartjs-render-monitor {$ chartjs：Object，__ zone_symbol__mousemovefalse：Array（1），__ zone_symbol__mouseoutfalse：Array（1），...} chart：Chart {id：1，ctx：CanvasRenderingContext2D，canvas： canvas.chartjs-render-monitor，...} chartArea：Object {left：71.7158203125，top：6，right：-71.7158203125，...} config：Object {type：“line”，data：Object，options：Object} controller：Chart {id：1，ctx：CanvasRenderingContext2D，canvas：canvas.chartjs-render-monitor，...} ctx：CanvasRenderingContext2D {canvas：canvas.chartjs-render-monitor，globalAlpha：1，globalCompositeOperation：“source-over”，...} currentDevicePixelRatio ：1 data：Object height：0 id：1 lastActive：Array（0）[] legend：ChartElement {ctx：CanvasRenderingContext2D，options：Object，chart：Chart，...}

Answer 1

你遇到的问题是chartRef未定义。您可以使用

<canvas id=chart> in your html

并在Chart构造函数中使用图表，或使用setter：

chartRef;
@ViewChild('dataChart') set ref(ref: ElementRef) {
    this.chartRef = ref;
}

我在stackblitz＃14中做了一个工作示例，该组件是图表示例

希望能帮助到你