在HighChart Angular 4项目中添加Highstock时间

时间:2017-07-11 15:00:28

标签: angular typescript highcharts highstock

我正试图在那里实现一个计时器:HighStock Timer

我已经在项目中使用了一些HighChart图表,我需要构建一些饼图和垂直条形图,包括来自Highstock的计时器...提前提交

这是我的代码:(我试图添加" rangeselector"但我什么都看不到 在我看来)

 export class MyDailyreportComponent implements OnDestroy, OnInit {


   //  @Input() showMePartially: boolean;
     @Input() displayDetail: boolean;

    options: any;
    data: Object[];
    chart: any;
    dataSubscription: Subscription;

     constructor(public userService3: UserService3) {

           this.options = {
            chart: {  type: 'pie',
                     plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,  },
   //     legend: { enabled: false },
            credits: { enabled: false },
            tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    title: {
        text: null
    },
    plotOptions: {
        pie: {
            startAngle: -90,
            endAngle: 90,
            allowPointSelect: false,
            cursor: 'pointer',
            dataLabels: {
                enabled: false,
     //      format: '<b>{point.name}</b>: {point.percentage:.1f} %',
            }
          }
         },
       rangeSelector: {
        enabled: true,
        allButtonsEnabled: true,
        buttons: [{
          type: 'hour',
          count: 1,
          text: '1h'
        }, {
          type: 'day',
          count: 1,
          text: '1d'
        }, {
          type: 'month',
          count: 1,
          text: '1m'
        }, {
          type: 'year',
          count: 1,
          text: '1y'
        }, {
          type: 'all',
          text: 'All'
        }],
        inputEnabled: true, // it supports only days
    //selected: 4 // all
      },
            series: [{
              name: 'Dispo',
              data: []
            }]
       };
        }

   saveInstance(chartInstance) {
    this.chart = chartInstance;
  //   console.log(chartInstance);
}

    public ngOnInit () {
    this.dataSubscription = this.userService3.getData().subscribe((data) 
=> {
      this.options.series[0].data = data.data.operating_rate;
   // Code for the pie

        let percentUp = data.data.operating_rate; // 88.14
        let percentDown = 100 - percentUp; // 11.86
        this.options.series[0].data = [
        {
        name: 'Up',
        y: percentUp,
        color: 'green'
        },
            {
        name: 'Down',
        y: percentDown,
        color: 'white'
        }
        ]
      console.log(data);
   });
}
    public ngOnDestroy() {
      if (this.dataSubscription) {
this.dataSubscription.unsubscribe();
}
 }
  }

这里是可能视图的屏幕截图: enter image description here

0 个答案:

没有答案