ng2-highcharts 中的仪表图

Question

我正在尝试寻找/解决如何使用 ng2-highcharts 来实现仪表。

我一直在研究 angular2-seed-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.js1?31240(39363621?31240) ）@ 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？1460493363214：9963Eventemitter.emit @ Angular2.js？1460493363215：12915（匿名功能）@ Angular2.js？1460493363215：13331zone。运行@ angular2-polyfills.js?1460493363213:1243NgZone._notifyOnTurnDone @a ngular2.js?1460493363215:13330(匿名函数) @ angular2.js?1460493363215:13445zoneBoundFn @ angular2-polyfills.js?1460493363213:1220lib$es6$promise$asap$$flush @ angular2-polyfills.js23:266 angular2.js?1460493363215:23083 ORIGINAL STACKTRACE:BrowserDomAdapter.logError @ angular2.js?1460493363215:23083ExceptionHandler.call @ angular2.js?1460493363215:1197(匿名函数) @ angular2.js?1460493363215:OnError2 angular2.js?1460493363215:OnError2 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？1460493363214：9500subject._next @ rx.js？1460493363214：99993363214下一个 @ Rx.js?1460493363214:9963EventEmitter.emit @ angular2.js?1460493363215:12915(匿名函数) @ angular2.js?1460493363215:13331Zone.run @ angular2-polyfills.js?1460493363213:12D43NgZangularone.js_ifyTurnnotone 1460493363215:13330（匿名函数）@角2.js?1460493363215:13445zoneBoundFn @ 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 在错误（本机） 在 ea (http://localhost:5556/node_modules/highcharts/highstock.js?1460493363216:8:256) 在 Object.Ca.initSeries (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:5556/node_modules/es6-shim/es6-shim.js?1460493363213:1107:14) 在 n (http://localhost:5556/node_modules/highcharts/highstock.js?1460493363216:26:295) 在 Object.Ca.firstRender (http://localhost:5556/node_modules/highcharts/highstock.js?1460493363216:235:13) 在 Object.Ca.init (http://localhost:5556/node_modules/highcharts/highstock.js?1460493363216:212:415) 在对象。 （http://localhost:5556/node_modules/highcharts/highstock.js?1460493363216:400:355)BrowserDomAdapter.logError Angular2.js @ angular2.js?1460493363215:13419Zone.run @ angular2-polyfills.js?1460493363213:1247(匿名函数) @ angular2.js?1460493363215:13438NgZone.run @ angular2.js?1460493363215:13400(匿名函数) ？1460493363215：12690schedulerFn @ angular2.js 1460493363215：？？12934tryCatcher @ Rx.js 1460493363214：31Subscriber.next @ Rx.js 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 @ angular2.js1):5133angular290(anonymous2):5133angular290(anonymous2) .js?1460493363215:13445zoneBoundFn @ angular2-polyfills.js?146049 3363213:1220lib$es6$promise$asap$$flush @ angular2-polyfills.js?1460493363213:262 angular2.js?1460493363215:23083 错误上下文：BrowserDomAdapter.logError @ angular2.js?1460493363215:23083ExceptionHandler.call @ angular2.js?1460493363215:1201（匿名函数）@ angular2.js?1460493363215:1259 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？1460493363214：9500subject._next @ rx.js？1460493363214：99993363214下一个 @ Rx.js?1460493363214:9963EventEmitter.emit @ angular2.js?1460493363215:12915(匿名函数) @ angular2.js?1460493363215:13331Zone.run @ angular2-polyfills.js?1460493363213:12D43NgZangularone.js_ifyTurnnotone 1460493363215:13330（匿名函数）@ angular2.js?1 460493363215:13445zoneBoundFn @ angular2-polyfills.js?1460493363213:1220lib$es6$promise$asap$$flush @ angular2-polyfills.js?1460493363213:262 angular2.js?1460493363215:23083 _Context {element: div.graph, componentElement: home, context: HomeCmp, locals: Object, injector: Injector...}BrowserDomAdapter.logError @ angular2.js?1460493363215:23083ExceptionHandler.call @ angular2.js? 1460493363215：1202（匿名函数）@ Angular2.js？1460493363215：12591ngzone._notifyOnError @ Angular2.js？1460493363215：13515Collection_1.TringMapWrapper.Merge.OnError @ Angular2.js？1460493363215：13419zone.Run @ Angular2-Polyfills.js？1460493363213：1460493363213：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?1460493363214:9963EventEmitter.emit@angular2.js?1460493363215:1293363215:1292.js?an 1460493363215:13331Zone.run @ angular2-polyfills.js?1460493363213:1243 NgZone._notifyOnTurnDone @ angular2.js?1460493363215:13330(匿名函数) @ angular2.js?1460493363215:13445zoneBoundFn @ angular2-polyfills.js?1460493363213:1220lib$es6$promise$asap2$3146$flush @angular09333fill :262

Answer 1

仪表需要 highcharts-more 库，我在 index.html 中添加了以下几行，它解决了上述问题。

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

图表现在呈现。