Angular Charts.js 渲染一个空白画布答案

【问题标题】：Angular Charts.js Rending a blank canvasAngular Charts.js 渲染一个空白画布
【发布时间】：2019-02-25 20:13:12
【问题描述】：

我在让 angular chart.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} 动画：true aspectRatio:2 box:Array(4) [ChartElement, ChartElement, ChartElement, ...] canvas:canvas.chartjs-render-monitor {$chartjs: 对象，__zone_symbol__mousemovefalse：数组（1）， __zone_symbol__mouseoutfalse: Array(1), …} chart:Chart {id: 1, ctx: CanvasRenderingContext2D, canvas: canvas.chartjs-render-monitor, …} 图表区域：对象{左：71.7158203125，上：6，右：-71.7158203125， …}配置：对象{类型：“线”，数据：对象，选项：对象} 控制器：图表{id：1，ctx：CanvasRenderingContext2D，画布： canvas.chartjs-render-monitor, ...} ctx:CanvasRenderingContext2D {画布：canvas.chartjs-render-monitor，globalAlpha：1， globalCompositeOperation: "source-over", …} currentDevicePixelRatio:1 数据：对象高度：0 id：1 lastActive：数组（0）[]图例：ChartElement {ctx：CanvasRenderingContext2D，选项：对象，图表：图表，...}

【问题讨论】：

标签： angular charts

【解决方案1】：

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

<canvas id=chart> in your html

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

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

我在stackblitz中做了一个工作示例，#14，组件是chart-example

希望对你有帮助

【讨论】：