ng2-highcharts中的量表

Question

我正在嘗試查找/計算出如何使用ng2-highcharts實施量規。

我一直在尋找的線和條形圖是如何在angular2種子-NG2-highcharts項目實施- https://github.com/Bigous/angular2-seed-ng2-highcharts並認為這將是一件簡單的事情將圖表選項修改為：

chart: {
        type: 'gauge',
        plotBackgroundColor: null,
        plotBackgroundImage: null,
        plotBorderWidth: 0,
        plotShadow: false
    },

    title: {
        text: 'Speedometer'
    },

    pane: {
        startAngle: -150,
        endAngle: 150,
        background: [{
            backgroundColor: {
                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                stops: [
                    [0, '#FFF'],
                    [1, '#333']
                ]
            },
            borderWidth: 0,
            outerRadius: '109%'
        }, {
            backgroundColor: {
                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                stops: [
                    [0, '#333'],
                    [1, '#FFF']
                ]
            },
            borderWidth: 1,
            outerRadius: '107%'
        }, {
            // default background
        }, {
            backgroundColor: '#DDD',
            borderWidth: 0,
            outerRadius: '105%',
            innerRadius: '103%'
        }]
    },

    // the value axis
    yAxis: {
        min: 0,
        max: 200,

        minorTickInterval: 'auto',
        minorTickWidth: 1,
        minorTickLength: 10,
        minorTickPosition: 'inside',
        minorTickColor: '#666',

        tickPixelInterval: 30,
        tickWidth: 2,
        tickPosition: 'inside',
        tickLength: 10,
        tickColor: '#666',
        labels: {
            step: 2,
            rotation: 'auto'
        },
        title: {
            text: 'km/h'
        },
        plotBands: [{
            from: 0,
            to: 120,
            color: '#55BF3B' // green
        }, {
            from: 120,
            to: 160,
            color: '#DDDF0D' // yellow
        }, {
            from: 160,
            to: 200,
            color: '#DF5353' // red
        }]
    },

    series: [{
        name: 'Speed',
        data: [80],
        tooltip: {
            valueSuffix: ' km/h'
        }
    }]

引用它的模板：

    <td width="50%">
        <div [ng2-highcharts]="chartGauge" class="graph"></div>
    </td>

該圖表未呈現，這些錯誤目前無法解釋：

angular2.js？1460493363215：23083原始例外：錯誤：Highcharts錯誤＃17：www.highcharts.com/errors/17BrowserDomAdapter.logError @ angular2.js？1460493363215：23083ExceptionHandler.call @ angular2.js？1460493363215：1194（匿名函數） @ angular2.js？1460493363215：12591NgZone._notifyOnError @ angular2.js？1460493363215：13515collection_1.StringMapWrapper.merge.onError @ angular2.js？1460493363215：13419Zone.run @ angular2-polyfills.js？1460493363213：1247（匿名函數）@ 2 .js？1460493363215：13438NgZone.run @ angular2.js？1460493363215：13400（匿名函數）@ angular2.js？1460493363215：12690schedulerFn @ angular2.js？1460493363215：12934tryCatcher @ Rx.js？1460493363214：31Subscriber.next @ Rx。 1460493363214：9500Subject._next @ Rx.js嗎？1460493363214：9999Subject.next @ Rx.js嗎？1460493363214：9963EventEmitter.emit @ angular2.js嗎？1460493363215：12915（匿名函數）@ angular2.js嗎？1460493363215：13331Zone.run @ angular2 -polyfills.js？1460493363213：1243NgZone._notifyOnTurnDone @ angu lar2.js？1460493363215：13330（匿名函數）@ angular2.js？1460493363215：13445zoneBoundFn @ angular2-polyfills.js？1460493363213：1220lib $ es6 $ promise $ asap $$ flush @ angular2-polyfills.js？1460493363213：262 angular2。 js？1460493363215：23083原始堆棧：BrowserDomAdapter.logError @ angular2.js？1460493363215：23083ExceptionHandler.call @ angular2.js？1460493363215：1197（匿名函數）@ angular2.js？1460493363215：12591NgZone._notifyOnError @ angular32：js？ 13515collection_1.StringMapWrapper.merge.onError @ angular2.js？1460493363215：13419Zone.run @ angular2-polyfills.js？1460493363213：1247（匿名函數）@ angular2.js？1460493363215：13438NgZone.run @ angular2.js？1460493363215：13400（匿名函數）@ angular2.js？1460493363215：12690schedulerFn @ angular2.js？1460493363215：12934tryCatcher @ Rx.js？1460493363214：31Subscriber.next @ Rx.js？1460493363214：9500Subject._next @ Rx.js？1460493363214 @ 9999Subject.n Rx.js？1460493363214：9963EventEmitter.emit @ angular2.js？1460493 363215：12915（匿名函數）@ angular2.js？1460493363215：13331Zone.run @ angular2-polyfills.js？1460493363213：1243NgZone._notifyOnTurnDone @ angular2.js？1460493363215：13330（匿名函數）@ angular2.js？1460493363215 @ 13445zoneBound angular2-polyfills.js？1460493363213：1220lib $ es6 $ promise $ asap $$ flush @ angular2-polyfills.js？1460493363213：262 angular2.js？1460493363215：23083錯誤：Highcharts錯誤＃17：www.highcharts.com/errors/ 17在Object.Ca.initSeries （ http：// localhost：5556 / node_modules / highcharts / highstock.js？1460493363216：8：256 ）處的錯誤（本機）（ http：// localhost：5556 / node_modules / highcharts / highstock.js？1460493363216：213：1 ）位於http：// localhost：5556 / node_modules / highcharts / highstock.js？1460493363216：235：42位於Array.forEach（本機）位於Array.forEach（ http：// localhost：位於Object.Ca的 n（ http：// localhost：5556 / node_modules / highcharts / highstock.js？1460493363216：26：295 ）的5556 / node_modules / es6-shim / es6-shim.js？1460493363213：1107：14 ）。 firstRender（ http：// localhost：55 在Object.Ca.init（ http：// localhost：5556 / node_modules / highcharts / highstock.js？1460493363216：212：415 ）處為56 / node_modules / highcharts / highstock.js？1460493363216：235：13 ）。 （ http：// localhost：5556 / node_modules / highcharts / highstock.js？1460493363216：400：355）BrowserDomAdapter.logError @ angular2.js？1460493363215：23083ExceptionHandler.call @ angular2.js？1460493363215：1198（匿名函數）@ angular2 .js？1460493363215：12591NgZone._notifyOnError @ angular2.js？1460493363215：13515collection_1.StringMapWrapper.merge.onError @ angular2.js？1460493363215：13419Zone.run @ angular2-polyfills.js？1460493363213：1247（匿名函數）@ angular2.js 1460493363215：13438NgZone.run @ angular2.js嗎？1460493363215：13400（匿名函數）@ angular2.js 1460493363215：12690schedulerFn @ angular2.js嗎？1460493363215：12934tryCatcher @ Rx.js嗎？1460493363214：31Subscriber.next @ Rx.js嗎？ ：9500Subject._next @ Rx.js？1460493363214：9999Subject.next @ Rx.js？1460493363214：9963EventEmitter.emit @ angular2.js？1460493363215：12915（匿名函數）@ angular2.js？1460493363215：13331Zone.run @ angular2-polyfills .js？1460493363213：1243NgZone._notifyOnTurnDone @ angular2.js？1460493363215：1333 0（匿名函數）@ angular2.js？1460493363215：13445zoneBoundFn @ angular2-polyfills.js？1460493363213：1220lib $ es6 $ promise $ asap $$ flush @ angular2-polyfills.js？1460493363213：262 angular2.js？1460493363215：23083錯誤CONTEXT：BrowserDomAdapter.logError @ angular2.js？1460493363215：23083ExceptionHandler.call @ angular2.js？1460493363215：1201（匿名函數）@ angular2.js？1460493363215：12591NgZone._notifyOnError @ angular2.js？1460493363215：13515collection_1.StringMapWrapper onError @ angular2.js？1460493363215：13419Zone.run @ angular2-polyfills.js？1460493363213：1247（匿名函數）@ angular2.js？1460493363215：13438NgZone.run @ angular2.js？1460493363215：13400（匿名函數）@ angular2。 js？1460493363215：12690schedulerFn @ angular2.js？1460493363215：12934tryCatcher @ Rx.js？1460493363214：31Subscriber.next @ Rx.js？1460493363214：9500Subject._next @ Rx.js？1460493363214：9999Subject.next @ Rx.js 9963EventEmitter.emit @ angular2.js？1460493363215：12915（匿名函數） @ angular2.js？1460493363215：13331Zone.run @ angular2-polyfills.js？1460493363213：1243NgZone._notifyOnTurnDone @ angular2.js？1460493363215：13330（匿名函數）@ angular2.js？1460493363215：13445zoneBoundFn @ angular2-polyfills13.js？ ：1220lib $ es6 $ promise $ asap $$ flush @ angular2-polyfills.js？1460493363213：262 angular2.js？1460493363215：23083 _Context {element：div.graph，componentElement：home，context：HomeCmp，locals：Object，jector：注入器...} BrowserDomAdapter.logError @ angular2.js？1460493363215：23083ExceptionHandler.call @ angular2.js？1460493363215：1202（匿名函數）@ angular2.js？1460493363215：12591NgZone._notifyOnError @ angular2.js？1460493363215：13515collection_1.StringMap .onError @ angular2.js？1460493363215：13419Zone.run @ angular2-polyfills.js？1460493363213：1247（匿名函數）@ angular2.js？1460493363215：13438NgZone.run @ angular2.js？1460493363215：13400（匿名函數）@ angular2 .js？1460493363215：12690schedulerFn @ angular2.js？14604933 63215：12934tryCatcher @ Rx.js？1460493363214：31Subscriber.next @ Rx.js？1460493363214：9500Subject._next @ Rx.js？1460493363214：9999Subject.next @ Rx.js？1460493363214：9963EventEmitter.emit @ angular2.js？146049336 12915（匿名函數）@ angular2.js？1460493363215：13331Zone.run@angular2-polyfills.js？1460493363213：1243NgZone._notifyOnTurnDone@angular2.js？1460493363215：13330（匿名函數）@ angular2.js？1460493363215：13445zoneBoundFn @ polyfills.js？1460493363213：1220lib $ es6 $ promise $ asap $$ flush @ angular2-polyfills.js？1460493363213：262

Answer 1

量規需要使用highcharts-more庫，我在index.html中添加了以下幾行，並解決了上述問題。

<script src="../node_modules/highcharts/highcharts.js"></script>
<script src="../node_modules/highcharts/highcharts-more.js"></script>

圖表現在呈現。