在angular2应用程序中包含其他highcharts源数据

Question

我正在为一个项目使用angular2-highcharts，但我无法创建可靠的仪表图，因为我需要在项目中包含highcharts-more.js .js。如果可能的话，我该如何把它包含进来呢？

this就是一个不在angular2中的例子。我需要能够包含这样的信息

<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>

我已经在package.json中安装了highcharts和angular2-highcharts。

Answer 1

这是一个使用angular2-highcharts在Angluar2中使用solid-gauge的演示。

http://plnkr.co/edit/6EtK5kldXPLWs6v6Dk3w?p=preview

我已经导入了所需的两个文件：highcharts-more和modules/solid-gauge，其版本与angular2-highcharts使用的版本相同。这是与Highcharts相关的第三方)。您可以在systemjs.config.js文件的第18-19行和app/main.js的第4-8行中看到这一点。在后一组行中，附加文件在Highcharts上初始化。

我发布的演示是基于using Highcharts with modules的angular2-highcharts演示：http://plnkr.co/edit/4Eifda2IPpCjykONSQQJ?p=preview

代码的重要部分：

app/main.js:

...
import { CHART_DIRECTIVES, Highcharts } from 'angular2-highcharts'; 
import HighchartsMore from 'highcharts/highcharts-more';
import HCSoldGauge from 'highcharts/modules/solid-gauge';

HighchartsMore(Highcharts);
HCSoldGauge(Highcharts);
...

systemjs.config.js:

 ...
'angular2-highcharts':        'https://cdn.rawgit.com/gevgeny/angular2-highcharts/0.1.0/dist',
'highcharts/highstock.src':   'https://cdn.rawgit.com/highcharts/highcharts-dist/v4.2.1/highstock.js',
'highcharts/highcharts-more': 'https://cdn.rawgit.com/highcharts/highcharts-dist/v4.2.1/highcharts-more.js',
'highcharts/modules/solid-gauge': 'https://cdn.rawgit.com/highcharts/highcharts-dist/v4.2.1/modules/solid-gauge.js'
...

Answer 2

    It's working. angular2-seed-ng2highcharts 

ref: https://github.com/AngularShowcase/angular2-seed-ng2-highcharts
    chart.html:
    -------------
    <div [ng2-highcharts]="chartGauge" class="graph" ></div>

    chart.component.ts:
    ------------------

    Add series option within the chart option.

    chartGauge = {
            chart: {
                        type: 'solidgauge'
                    },

                    title: {
                        text: 'ASUP'

                    },

                    pane: {
                        center: ['50%', '70%'],
                        size: '140%',
                        startAngle: -90,
                        endAngle: 90,
                        background: {
                            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
                            innerRadius: '60%',
                            outerRadius: '100%',
                            shape: 'arc'
                        }
                    },


                    tooltip: {
                        enabled: true
                    },

                    // the value axis
                    yAxis: {
                        min: 0,
                        max: 200,
                        title: {
                            text: 'Speed'
                        }
                        stops: [
                            [0.5, '#FF5252'], // red*
                            [0.9, '#69F0AE'] // green

                        ],
                        lineWidth: 0,
                        minorTickInterval: null,
                        tickAmount: 1,
                        title: {
                            y: -40
                        },
                        labels: {
                            y: 15
                        }
                    },

                    plotOptions: {
                        solidgauge: {
                            dataLabels: {
                                y: 25,
                                borderWidth: 0,
                                useHTML: true
                            }
                        }
                    }
                    series: [{
                name: 'Speed',
                data: [80],
                dataLabels: {
                    format: '<div style="text-align:center"><span style="font-size:25px;color:' +
                        ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
                           '<span style="font-size:12px;color:silver">km/h</span></div>'
                },
                tooltip: {
                    valueSuffix: ' km/h'
                }
            }]
      };