How to insert <script> in angular? Simple HTML works!

Asked

Viewed 1,734 times

0

Guys, my . html Component is like this:

<script>
    window.onload = function () {

    var chart = new CanvasJS.Chart("chartContainer", {
        animationEnabled: true,
        title:{
            text: "Monthly Expenses, 2016-17"
        },
        axisY :{
            includeZero: false,
            prefix: "$"
        },
        toolTip: {
            shared: true
        },
        legend: {
            fontSize: 13
        },
        data: [{
            type: "splineArea",
            showInLegend: true,
            name: "Salaries",
            yValueFormatString: "$#,##0",
            xValueFormatString: "MMM YYYY",
            dataPoints: [
                { x: new Date(2016, 2), y: 30000 },
                { x: new Date(2016, 3), y: 35000 },
                { x: new Date(2016, 4), y: 30000 },
                { x: new Date(2016, 5), y: 30400 },
                { x: new Date(2016, 6), y: 20900 },
                { x: new Date(2016, 7), y: 31000 },
                { x: new Date(2016, 8), y: 30200 },
                { x: new Date(2016, 9), y: 30000 },
                { x: new Date(2016, 10), y: 33000 },
                { x: new Date(2016, 11), y: 38000 },
                { x: new Date(2017, 0),  y: 38900 },
                { x: new Date(2017, 1),  y: 39000 }
            ]
         },
        {
            type: "splineArea", 
            showInLegend: true,
            name: "Office Cost",
            yValueFormatString: "$#,##0",
            dataPoints: [
                { x: new Date(2016, 2), y: 20100 },
                { x: new Date(2016, 3), y: 16000 },
                { x: new Date(2016, 4), y: 14000 },
                { x: new Date(2016, 5), y: 18000 },
                { x: new Date(2016, 6), y: 18000 },
                { x: new Date(2016, 7), y: 21000 },
                { x: new Date(2016, 8), y: 22000 },
                { x: new Date(2016, 9), y: 25000 },
                { x: new Date(2016, 10), y: 23000 },
                { x: new Date(2016, 11), y: 25000 },
                { x: new Date(2017, 0), y: 26000 },
                { x: new Date(2017, 1), y: 25000 }
            ]
         },
        {
            type: "splineArea", 
            showInLegend: true,
            name: "Entertainment",
            yValueFormatString: "$#,##0",     
            dataPoints: [
                { x: new Date(2016, 2), y: 10100 },
                { x: new Date(2016, 3), y: 6000 },
                { x: new Date(2016, 4), y: 3400 },
                { x: new Date(2016, 5), y: 4000 },
                { x: new Date(2016, 6), y: 9000 },
                { x: new Date(2016, 7), y: 3900 },
                { x: new Date(2016, 8), y: 4200 },
                { x: new Date(2016, 9), y: 5000 },
                { x: new Date(2016, 10), y: 14300 },
                { x: new Date(2016, 11), y: 12300 },
                { x: new Date(2017, 0), y: 8300 },
                { x: new Date(2017, 1), y: 6300 }
            ]
         },
        {
            type: "splineArea", 
            showInLegend: true,
            yValueFormatString: "$#,##0",      
            name: "Maintenance",
            dataPoints: [
                { x: new Date(2016, 2), y: 1700 },
                { x: new Date(2016, 3), y: 2600 },
                { x: new Date(2016, 4), y: 1000 },
                { x: new Date(2016, 5), y: 1400 },
                { x: new Date(2016, 6), y: 900 },
                { x: new Date(2016, 7), y: 1000 },
                { x: new Date(2016, 8), y: 1200 },
                { x: new Date(2016, 9), y: 5000 },
                { x: new Date(2016, 10), y: 1300 },
                { x: new Date(2016, 11), y: 2300 },
                { x: new Date(2017, 0), y: 2800 },
                { x: new Date(2017, 1), y: 1300 }
            ]
        }]
    });
    chart.render();

    }


<div class="container-fluid">
<div class="row mb-4">
    <div class="col-md-4 padding">
        <div class="mod shadow">
            <h6>Moderações - 5213</h6>     
                <!-- Tentativa Charts -->                        
                <div id="chartContainer" style="height: 250px; width: 200px;"></div>
                <script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
                <!-- Fim Charts -->
        </div>    
    </div>
    <div class="col-md-4 padding">
            <div class="modUser shadow">
                <h6>Moderações por Usuário - 2603</h6> 
            </div>
        </div>
        <div class="col-md-4 padding">
            <div class="modCat shadow">
                <h6>Moderações por Categoria - 2603</h6> 
            </div>
        </div>
</div>

<div class="row mb-4">
    <div class="col-md-12 padding">
        <div class="solMod shadow">
            <h6>Solicitação de Moderação - 3875</h6> 
        </div>
    </div>
</div>

<div class="row">   
    <div class="col-md-4 padding">
        <div class="solCad shadow">
            <h6>Solicitações de Cadastro - 1254</h6> 
        </div>
    </div>
    <div class="col-md-8 padding">
        <div class="solCadExpand shadow">
            <h6>Solicitações de Cadastro - 1254</h6>
            <!-- Charts -->

        </div>
    </div>
</div>

However at the time does not display the graph. I tested in simple html and it worked. But at angular no..

javascript html angularjs angular script

  • How did you add the Canvasjs library to your project? Did you add it in angular-cli.json? gives a look here: https://github.com/angular-cli/wiki/stories-global-scripts

1 answer

3

Since you are using an external library at the angle you should add it at angular-cli.json

  "scripts": [
    //caminho do seu JS 
    "../assets/scripts/canvasjs.min"
  ],

Or you can use the npm install canvasjs --save importing as in the TS below and importing the script into index.html <script src="canvasjs/dist/canvasjs.js">

And for a good practice avoid using the <script></script> at the angle. canvasJS itself already supports at the angle. Example in canvasJS documentation

/*app.component.ts*/
import { Component, OnInit } from '@angular/core';
import * as CanvasJS from './canvasjs.min';
//var CanvasJS = require('./canvasjs.min');

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})

export class AppComponent implements OnInit {
    ngOnInit() {
        let chart = new CanvasJS.Chart("chartContainer", {
        animationEnabled: true,
        exportEnabled: true,
        title: {
            text: "Basic Column Chart in Angular"
        },
        data: [{
            type: "column",
            dataPoints: [
                { y: 71, label: "Apple" },
                { y: 55, label: "Mango" },
                { y: 50, label: "Orange" },
                { y: 65, label: "Banana" },
                { y: 95, label: "Pineapple" },
                { y: 68, label: "Pears" },
                { y: 28, label: "Grapes" },
                { y: 34, label: "Lychee" },
                { y: 14, label: "Jackfruit" }
            ]
        }]
    });

    chart.render();
    }
}

.html

<div id="chartContainer" style="height: 370px; width: 100%;"></div>

Browser other questions tagged javascript html angularjs angular script

You are not signed in. Login or sign up in order to post.