如何在Angular4中使用Chart.js？

我一直在尝试在Angular4中使用Chart.js。 我正在使用VisualStudio

我尝试使用ViewChild，但后来我决定尝试官方方式：

package.json:

"@angular/core": "4.2.5",
"@types/chart.js": "^2.7.40",
"chart.js": "^2.7.3",

import { Chart } from "chart.js"

export class SalesChart implements OnInit {

    @Input("chartWidth") width: string = "10%"
    @Input("chartHeight") height: string = "20%"
    @ViewChild("chartCanvas") private chartCanvas:any


// when click the button:
drawChart() {
    // new Chart does not accep HTMLElement
    // var ctx = document.getElementById("myChart")   

    var myChart = new Chart("myChart", {
        type: 'bar',
        data: {
            labels: ["Red", "Blue"],
            datasets: [{
                label: '# of Votes',
                data: [12, 19, 3, 5, 2, 3],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    })  
}

my chart.html:

<canvas id="myChart" width="400" height="400"></canvas>
or
<canvas #chartCanvas [style.width]="width" [style.height]="height"></canvas>

画布最初是以指定的维度呈现的，但在执行drawChart（）时，画布的宽度和高度设置为=“0”，画布变为空。
初始HTML元素：

<canvas _ngcontent-c2="" height="400" id="myChart" width="400"></canvas>

结果HTML元素：

<canvas _ngcontent-c2="" height="0" id="myChart" width="0" class="chartjs-render-monitor" style="display: block; height: 0px; width: 0px;"></canvas>

我可以使用/height更改画布，但画布绝对是空的

我还尝试使用ViewChild解决方案，但当我将有效的内容传递给Chart（）时，我得到了相同的结果：宽度和高度设置为“0”，画布为空

        //var ctx = (<HTMLCanvasElement>this.chartCanvas.nativeElement).getContext("2d")
    var ctx = document.getElementById("chartCanvas") as HTMLCanvasElement

//var ctx=（this.chartCanvas.nativeElement.getContext（“2d”）
var ctx=document.getElementById（“chartCanvas”）作为HTMLCanvasElement

我发现一些教程使用：

chart = []
// and this in the HTML template
<canvas ...>{{ chart }}</canvas>

chart=[]
//这在HTML模板中
{{chart}}

使用这种方法，当我没有错误时，图表结果为[Object]

---

有人知道为什么不创建图表吗？

我通常通过priming使用chart.js，即使我不想使用priming，我也会遵循他们的示例，因为我发现它很干净。您可以在这里看到它们是如何实现的：

我使用了它们的示例，但实际上与我的示例类似，具有额外的属性配置。他们的package.json有chart.js 2.7.3，和我一样，但有角度7。。我在Angular 5中看到了很多例子，但我认为Angular 4存在问题。生成的画布保持了原来的大小，但仍然是空的。我做了一些其他的小改动，效果很好！谢谢