使用Angular的Highchart TypeScript

时间:2016-09-11 08:54:16

标签: angularjs typescript highcharts

我使用Highcharts,TypeScript和Angular1.5来保存 const变量数据 。 但这有效,并不会显示每个数据。 有没有人有任何想法来解决这个问题? 任何建议,将不胜感激。 非常感谢, 宙

    class MSSPiesController {

      private chartData:{
        availability?:IPieData//data type
        itemType?:IPieData//data type
        linkOwner?:IPieData//data type
      } = {};
      public chartTest;

      constructor(private $window:IWindowService,
                  private MSSCustomerService:IMSSCustomerService) {
        'ngInject';

        const data = this.MSSCustomerService.availabilityData;

        console.log("Customer service", data);

      }

      get availabilityData():IPieData {
        if (angular.isUndefined(this.chartData.availability)) {
This is the data what I want to use.

    MSSCustomerService.availabilityData
has interface in other page

          const data = this.MSSCustomerService.availabilityData;
          if (angular.isDefined(data)) {
            // this.chartData.availability = {
            // labels: ['up', 'down'],
            // data: [data.up, data.down],
            // colours: ['#058DC7', '#50B432'],

            // };
            this.reflow();
Here, the below using Highcharts

            this.chartTest = {
              options: {
                chart: {
                  type: 'pie',
                },
              },

              series: [{
I want use the above variable inside.

                data: [data.down, data.up]//Here, should show up the data     using the above variable
                // data: [10, 10]
              }],
              title: {
                text: false
              },
              loading: false
            };
          }
        }
        return this.chartData.availability;
      }
    }

    export const mssPiesComponent:IComponentOptions = {
      template: `
        <section class="card card-block m-t-10">
          <h2 class="display-8">
            Stats
          </h2>
          <p class="pull-right">Total Circuits: [[ $ctrl.numCircuits ]]</p>
          <pie-chart title="Availability" chart-data="$ctrl.availabilityData.data" labels="$ctrl.availabilityData.labels"     pie-colors="$ctrl.availabilityData.colours"></pie-chart> 
          <div>
          [[ $ctrl.availabilityData.labels ]]
          [[ $ctrl.availabilityData.data ]]
    </div>
<div>
<!--Pie chart using high chart-->
        <highchart id="chart1" config="$ctrl.chartTest"></highchart>
    </div>
    </section>
      `,
      controller: MSSPiesController,
      bindings: {
        numCircuits: '@',
      }
    };

0 个答案:

没有答案