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

我正在为一个项目使用angular2 highcharts，我无法创建实心量表，因为我需要highcharts-more.js包含在项目中。如果可能的话，我该如何将其包括在内

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

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

我已经安装了highcharts和angular2 highcharts，并且在package.json中。

它正在工作。angular2-seed-NG2海图
    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'
                }
            }]
      };

裁判：https://github.com/AngularShowcase/angular2-seed-ng2-highcharts
chart.html：
-------------
chart.component.ts：
------------------
在图表选项中添加系列选项。
图表规格={
图表：{
类型：“solidgauge”
},
标题：{
文本：“ASUP”
},
窗格：{
中心：['50%，'70%，]，
大小：“140%”，
startAngle:-90，
端角：90，
背景：{
背景颜色：（Highcharts.theme&&Highcharts.theme.background2）| |'#EEE'，
内半径：“60%”，
外层：“100%”，
形状：“圆弧”
}
},
工具提示：{
已启用：true
},
//价值轴
亚克斯：{
分:0,，
最高：200，
标题：{
文字：“速度”
}
停止：[
[0.5，#FF5252']，//红色*
[0.9，#69F0AE']//绿色
],
线宽：0，
minorTickInterval:null，
金额：1，
标题：{
y:-40
},
标签：{
y:15
}
},
打印选项：{
solidgauge：{
数据标签：{
y:25，
边框宽度：0，
useHTML:true
}
}
}
系列：[{
名称：“速度”，
数据：[80]，
数据标签：{
格式：“{y}
”+
“公里/小时”
},
工具提示：{
valueSuffix:'公里/小时'
}
}]
};

下面是一个用英语制作的solid gauge演示，其中包含

angular2海图


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

我发布的演示基于以下方面的
angular2 highcharts
demo：

守则的重要部分：

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);
...

 ...
'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'
...

systemjs.config.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);
...

 ...
'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'
...

这很酷。看起来它已经坏了，但是对于最新的abgular2和angular2 highcharts，你能发布一个更新吗？@EMa我不知道plunker中最新版本的演示程序在哪里，但是基于它，可以让它像在中一样工作