Question

组件

    import {Component} from '@angular/core';

@Component({
    selector: 'cad',
    templateUrl: './cad.html'
})
export class cadcomponent {



}

cad.html

<div class="row">
            <div class="col-md-12">
                <div class="thumbnail alert-info alert alert-dismissible fade in">
                    <p class="lead text-center"> Our Dynamic KPI</p>
                </div>
            </div>
        </div>

        <script src="scripts/cad.js"></script>

        <div id="container1" class="chart"></div>

cad.js

$.get('scripts/dataCAD.csv', function(csv) {
$('#container1').highcharts({
  chart: {
      type: 'column'
  },
  data: {
      csv: csv
  },
  title: {
      text: 'CAD'
  },
  yAxis: {
      title: {
          text: 'Units'
      }
  }
});

});

和我的index.html

<html>
  <head>
    <link rel="icon" href="Resources/favicon.ico">
    <base href="/">

    <title>IT Status</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet">

    <link href="starter-template.css" rel="stylesheet">


    <link href="styles.css" rel="stylesheet">
    <link href="center.css" rel="stylesheet">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>


    <script src="scripts/jquery-1.9.1.min.js"></script>
        <script src="scripts/highcharts.js"></script>
        <script src="scripts/highchartsdatamodule.js"></script>
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>System.import('app').catch(function(err){ console.error(err); });</script>





    <script src="scripts/cad.js" type="text/javascript"></script>
    <script src="scripts/market.js" type="text/javascript"></script>
    <script src="scripts/system.js" type="text/javascript"></script>

    <script>window.jQuery || document.write('<script src="bootstrap-3.3.6-dist/js/vendor/jquery.min.js"><\/script>')</script>
    <script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
    <script src="scripts/app.js"></script>
    <script src="scripts/speed.js"></script>
    <script src="scripts/nickcodestatus.js"></script>
    <script src="scripts/nickworkingon.js"></script>
    <script src="scripts/seamuscodestatus.js"></script>
    <script src="scripts/seamusworkingon.js"></script>
    <script src="scripts/mikecodestatus.js"></script>
    <script src="scripts/mikeworkingon.js"></script>
    <script src="scripts/justincodestatus.js"></script>
    <script src="scripts/justinworkingon.js"></script>
    <script src="scripts/tonycodestatus.js"></script>
    <script src="scripts/tonyworkingon.js"></script>
    <script src="scripts/kevincodestatus.js"></script>
    <script src="scripts/kevinworkingon.js"></script>
    <script data-main="scripts/main.js" src="scripts/require.js"></script>

  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->


  </body>
</html>

所以我用谷歌搜索了错误，我被带到了这个页面http://www.highcharts.com/errors/16

我只是对我做错了什么感到困惑我没有看到对高图表模块的两次调用。我已经将容器名称更改为与我在此文章中在堆栈溢出Highcharts Error #16: charts not showing on the same page上看到的完全相同。如果有人能帮助我，我将非常感激。我几乎完成了网站，这是我最后一个装载的问题。

更新了组件

import {Component} from '@angular/core';

@Component({

        selector: 'cad',
        template: `
        <div class="row">
                    <div class="col-md-12">
                        <div class="thumbnail alert-info alert alert-dismissible fade in">
                            <p class="lead text-center"> Our Dynamic KPI</p>
                        </div>
                    </div>
                </div>
        <pre id="csv" style="display:none">Month,Current,Previous
        JAN,100,100
        FEB,100,100
        MAR,100,100
        APR,100,100
        MAY,100,100
        JUN,100,100
        JUL,100,100
        AUG,100,100
        SEPT,100,100
        OCT,100,100
        NOV,,100
        DEC,,100</pre>
        <chart [options]="options"></chart>
        `
    })
    export class cadcomponent {
        constructor() {
            this.options = {
                chart: {
                    type: 'column',
                },
                title: {
                    text: 'CAD'
                },
                subtitle: {
                    text: 'Uptime % for CAD'
                },
                xAxis: {
                    categories: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEPT', 'OCT', 'NOV', 'DEC']
                },
                series: [{
                    name: "Current",
                    data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100,]
                },
                    {
                        name: "Previous",
                        data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100,]
                    }]
            };
        }
        options: Object;
    }

尝试为角度2加载高图表时获得高图表错误16

0 个答案: