Question

我正在为项目使用angular2-highcharts而我无法创建Solid Gauge图表，因为我需要将highcharts-more.js包含在项目中。如果可能的话，我该怎么做？

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

<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中的实心测量演示。

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

我已导入两个必需文件：highcharts-more和modules/solid-gauge，版本与angular2-highcharts使用的版本相同（BTW。这是与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

代码的重要部分：

应用/ 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'
                }
            }]
      };

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

2 个答案: