Как использовать Chart.js в Angular4?

Question

Я застрял, пытаясь использовать Chart.js в Angular4.Я использую Visual Studio.

Я пытался использовать ViewChild, но затем решил попробовать официальный путь:
https://www.chartjs.org/docs/latest/getting-started/usage.html

package.json:

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

my-chart.html:

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

" my-chart.ts:

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
                    }
                }]
            }
        }
    })  
}

Холстпервоначально отображается с назначенными размерами, но когда drawChart () выполняется, холст устанавливается с width и height = "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>

Я могу изменить с / высоту, но холст абсолютноempty .

Я также пытался использовать решение ViewChild, но когда я передаю что-то допустимое в Chart (), я получаю тот же результат: ширина и высота равны "0", а пустой холст.

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

Я нашел несколько учебных пособий, которые используют:

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

При таком подходе, когда у меня нет ошибок, результатом диаграммы будет [Object Object].

Кто-то знает, почемусимволт не создан?

Answer 1

Я обычно использую chart.js через primeng, и даже если я не хочу использовать primeng, я следую их примеру, потому что считаю его чистым.Вы можете увидеть, как они реализуют это здесь: https://github.com/primefaces/primeng/blob/master/src/app/components/chart/chart.ts