javascript - 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 ORIGINAL EXCEPTION: Error: Highcharts error #17: www.highcharts.com/errors/17BrowserDomAdapter.logError @ angular2.js?1460493363215:23083ExceptionHandler.call @ angular2.js?1460493363215:1194(anonymous function) @ angular2.js?1460493363215:12591NgZone._notifyOnError @ angular2.js?1460493363215:13515collection_1.StringMapWrapper.merge.onError @ angular2.js?1460493363215:13419Zone.run @ angular2-polyfills.js?1460493363213:1247(anonymous function) @ angular2.js?1460493363215:13438NgZone.run @ angular2.js?1460493363215:13400(anonymous function) @ 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(anonymous function) @ angular2.js?1460493363215:13331Zone.run @ angular2-polyfills.js?1460493363213:1243NgZone._notifyOnTurnDone @ angular2.js?1460493363215:13330(anonymous function) @ angular2.js?1460493363215:13445zoneBoundFn @ angular2-polyfills.js?1460493363213:1220lib$es6$promise$asap$$flush @ angular2-polyfills.js?1460493363213:262 angular2.js?1460493363215:23083 ORIGINAL STACKTRACE:BrowserDomAdapter.logError @ angular2.js?1460493363215:23083ExceptionHandler.call @ angular2.js?1460493363215:1197(anonymous function) @ angular2.js?1460493363215:12591NgZone._notifyOnError @ angular2.js?1460493363215:13515collection_1.StringMapWrapper.merge.onError @ angular2.js?1460493363215:13419Zone.run @ angular2-polyfills.js?1460493363213:1247(anonymous function) @ angular2.js?1460493363215:13438NgZone.run @ angular2.js?1460493363215:13400(anonymous function) @ 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(anonymous function) @ angular2.js?1460493363215:13331Zone.run @ angular2-polyfills.js?1460493363213:1243NgZone._notifyOnTurnDone @ angular2.js?1460493363215:13330(anonymous function) @ angular2.js?1460493363215:13445zoneBoundFn @ angular2-polyfills.js?1460493363213:1220lib$es6$promise$asap$$flush @ angular2-polyfills.js?1460493363213:262 angular2.js?1460493363215:23083 Error: Highcharts error #17: www.highcharts.com/errors/17 at Error (native) at ea (http://localhost:5556/node_modules/highcharts/highstock.js?1460493363216:8:256) at Object.Ca.initSeries (http://localhost:5556/node_modules/highcharts/highstock.js?1460493363216:213:1) at http://localhost:5556/node_modules/highcharts/highstock.js?1460493363216:235:42 at Array.forEach (native) at Array.forEach (http://localhost:5556/node_modules/es6-shim/es6-shim.js?1460493363213:1107:14) at n (http://localhost:5556/node_modules/highcharts/highstock.js?1460493363216:26:295) at Object.Ca.firstRender (http://localhost:5556/node_modules/highcharts/highstock.js?1460493363216:235:13) at Object.Ca.init (http://localhost:5556/node_modules/highcharts/highstock.js?1460493363216:212:415) at Object. (http://localhost:5556/node_modules/highcharts/highstock.js?1460493363216:400:355)BrowserDomAdapter.logError @ angular2.js?1460493363215:23083ExceptionHandler.call @ angular2.js?1460493363215:1198(anonymous function) @ angular2.js?1460493363215:12591NgZone._notifyOnError @ angular2.js?1460493363215:13515collection_1.StringMapWrapper.merge.onError @ angular2.js?1460493363215:13419Zone.run @ angular2-polyfills.js?1460493363213:1247(anonymous function) @ angular2.js?1460493363215:13438NgZone.run @ angular2.js?1460493363215:13400(anonymous function) @ 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(anonymous function) @ angular2.js?1460493363215:13331Zone.run @ angular2-polyfills.js?1460493363213:1243NgZone._notifyOnTurnDone @ angular2.js?1460493363215:13330(anonymous function) @ angular2.js?1460493363215:13445zoneBoundFn @ angular2-polyfills.js?1460493363213:1220lib$es6$promise$asap$$flush @ angular2-polyfills.js?1460493363213:262 angular2.js?1460493363215:23083 ERROR CONTEXT:BrowserDomAdapter.logError @ angular2.js?1460493363215:23083ExceptionHandler.call @ angular2.js?1460493363215:1201(anonymous function) @ angular2.js?1460493363215:12591NgZone._notifyOnError @ angular2.js?1460493363215:13515collection_1.StringMapWrapper.merge.onError @ angular2.js?1460493363215:13419Zone.run @ angular2-polyfills.js?1460493363213:1247(anonymous function) @ angular2.js?1460493363215:13438NgZone.run @ angular2.js?1460493363215:13400(anonymous function) @ 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(anonymous function) @ angular2.js?1460493363215:13331Zone.run @ angular2-polyfills.js?1460493363213:1243NgZone._notifyOnTurnDone @ angular2.js?1460493363215:13330(anonymous function) @ angular2.js?1460493363215: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(anonymous function) @ angular2.js?1460493363215:12591NgZone._notifyOnError @ angular2.js?1460493363215:13515collection_1.StringMapWrapper.merge.onError @ angular2.js?1460493363215:13419Zone.run @ angular2-polyfills.js?1460493363213:1247(anonymous function) @ angular2.js?1460493363215:13438NgZone.run @ angular2.js?1460493363215:13400(anonymous function) @ 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(anonymous function) @ angular2.js?1460493363215:13331Zone.run @ angular2-polyfills.js?1460493363213:1243NgZone._notifyOnTurnDone @ angular2.js?1460493363215:13330(anonymous function) @ angular2.js?1460493363215:13445zoneBoundFn @ angular2-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>

图表现已呈现。