Highcharts不適用於iOS和Safari

Question

我遇到問題，無法在iOS和Safari上顯示我的Highcharts的數據。 Chrome顯示沒有問題。你認爲我的錯誤的答案是什麼？ 謝謝

Answer 1

在您使用Date.getTime()，讓你的時間在UNIX時間戳（自1970-01-01毫秒）

Safari和iOS上的Chrome瀏覽器無法解析這樣的日期代碼，你需要將其轉換不同的是它使Safari和Highcharts都可以工作。

按照this example中的說明，您可以使用Date.UTC(year,month,day)解析Highcharts的日期。

試試這個，讓我知道它是否工作！

順便說一句你不需要再排序日期;）

Answer 2

ISO Highcharts

JS Fiddle Example

使用相同下面的代碼它的工作

HTML

<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; 
    margin: 0 auto"> 
</div> 

JS

Highcharts.chart('container', { 
chart: { 
    type: 'bar' 
}, 
credits: { 
      enabled: false 
     }, 
     exporting: { 
      enabled: false 
     }, 
title: { 
    text: 'Campus Placement Preferences' 
}, 
xAxis: { 
    categories: ['BACHELOR', 'MASTER', 'DIPLOMA', 'DOCTORATE'], 

    labels: { 
     enabled: true 
    }, 
    minorTickLength: 0, 
    tickLength: 0 
     }, 
    yAxis: { 
    min: 0, 
    title: { 
     text: '' 
    }, 
    gridLineColor: 'transparent' 
}, 
legend: { 
    reversed: true 
}, 

tooltip: { 
        headerFormat: '<span style="font-size:11px"> 
{series.name}</span><br>', 
        pointFormat: '<span style="color:{point.color}"></span> 
    <b>{point.y}%</b> of total 100%<br/>' 
       }, 
    plotOptions: { 
    series: { 
     stacking: 'percent' 
    } 
}, 
    series: [{ 
     name: 'NO', 
    color:'#70d8ff', 
    data: [50, 30, 40, 70] 
}, { 
    name: 'YES', 
    color:'#1d3166', 
    data: [50, 70, 60, 30] 
}] 
}); 

Answer 3

感謝您的回覆，但我發佈了您的代碼，導致我在Safari和iOS上顯示問題。

export class AnalyticsPage implements OnInit { 

    public optionsRedirection: any; 
    public optionsPage: any; 
    public isAnimation: boolean = true; 
    public beacons: BeaconData[] = []; 
    public totalViewsRedirection: number = 0; 
    public totalViewsPage: number = 0; 
    public redirections: any[] = []; 
    public convertedRedirections: SeriesData[] = []; 
    public seriesRedirection: SeriesData[] = []; 
    public seriesPage: SeriesData[] = []; 

    constructor(
    public _notificationProvider: NotificationProvider, 
    public _toastCtrl: ToastController, 
    public _translate: TranslateService, 
    private _beaconProvider: BeaconProvider, 
    private navCtrl: NavController, 
    private _platform: Platform, 
    private _alertCtrl: AlertController 
) { 
    if (!MyApp.isUserAuthenticated()) { 
     this.navCtrl.setRoot('LoginPage'); 
    } else { 
     if (!AppConstants.USER_ID) { 
     // AppConstants.USER_ID = JSON.parse(localStorage.getItem()).uid; 
     this.navCtrl.setRoot('HomePage'); 
     } 
    } 
    if (!MyApp.isUserAuthorized(AppConstants.ANALYTICS_REQUIREMENT)) { 
     this.navCtrl.setRoot('HomePage'); 
     this.showForbiddenToast(); 
    } 
    this.initHighstockOptions(); 
    } 

    ngOnInit() { 
    // connection à la bd avec mon customer 
    firebase.database().ref(`customer/${AppConstants.USER_ID}/beacon`).on('value',() => { 
     console.log(`KUSTOMER ${JSON.stringify(AppConstants.USER_ID)}`); 
     this.initChartOptions(); 
     this.drawChart('Redirection'); 
     this.drawChart('Page'); 
     this.setTotalViews(); 
    }); 
    } 

    showForbiddenToast(): void { 
    this._toastCtrl.create({ 
     message: this._translate.instant('PAGE.HOME.FORBIDDEN'), 
     duration: 3000, 
     position: 'bottom' 
    }).present(); 
    } 

    initChartOptions(): void { 
    let communOptions: any = { 
     chart: { type: 'column' }, 
     title: { text: '' }, 
     xAxis: { 
     title: { 
      text: this._translate.instant('Années') 
     }, 
     type: 'datetime' 
     }, 
     yAxis: { 
     allowDecimals: false, 
     title: { 
      text: this._translate.instant('Affichage') 
     }, 
     labels: { 
      formatter: function() { 
      return this.value; 
      } 
     } 
     }, 
     tooltip: { 
     pointFormat: '<b>{point.y:,.0f}</b>' 
     }, 
     plotOptions: { 
     series: { 
      animation: this.isAnimation 
     }, 
     column: { 
      pointPadding: 0.2, 
      borderWidth: 0 
     } 
     } 
    }; 
    this.optionsRedirection = _.clone(communOptions); 
    this.optionsRedirection.series = this.seriesRedirection; 
    this.optionsPage = _.clone(communOptions); 
    this.optionsPage.series = this.seriesPage; 
    } 

    drawChart(type: string): void { 
    let views; 
    this._beaconProvider.getBeacons().subscribe((data) => { 
     this.convertedRedirections = []; 
     views = 0; 
     this.beacons = _.values(data); 
     _.forEach(this.beacons, (beacon) => { 
     if (type === 'Redirection') { 
      if (beacon.analytic && beacon.analytic.redirection) { 
      this.redirections = _.values(beacon.analytic.redirection); 
      console.log(`REDIREKZIOA: ${JSON.stringify(this.redirections)}`); 
      } 
     } else { 
      if (beacon.analytic && beacon.analytic.page) { 

      console.log(`BEACON_ANALYTIC: ${JSON.stringify(beacon.analytic)}`); 
      this.redirections = _.values(beacon.analytic.page); 
      console.log(`ORRIALDEA: ${JSON.stringify(this.redirections)}`); 
      } 
     } 
     }); 
     for (var i = 0; i < this.redirections.length; i++) { 
     let nameIndex = _.findIndex(this.convertedRedirections, { name: this.redirections[i].longUrl }); 
     if (nameIndex === -1) { 
      console.debug('Index not found'); 
      this.convertedRedirections[this.convertedRedirections.length] = { 
      name: this.redirections[i].longUrl, 
      data: [ 
       [ 
       new Date(this.redirections[i].date).getFullYear() + '-' + 
       (new Date(this.redirections[i].date).getMonth() + 1) + '-' + // + 1 because array starts with 0; 
       (new Date(this.redirections[i].date).getDate() + 1), 
       1 
       ] 
      ] 
      } 
     } else { 
      let dateIndex = -1; 
      for (var a = 0; a < this.convertedRedirections[nameIndex].data.length; a++) { 
      if (this.convertedRedirections[nameIndex].data[a][0] === 
       new Date(this.redirections[i].date).getFullYear() + '-' + 
       (new Date(this.redirections[i].date).getMonth() + 1) + '-' + 
       (new Date(this.redirections[i].date).getDate() + 1)) { 
       dateIndex = a; 
       break; 
      } 
      } 

      if (dateIndex === -1) { 
      // console.debug('nameIndex found: ' + nameIndex); 
      this.convertedRedirections[nameIndex].data.push(
       [ 
       new Date(this.redirections[i].date).getFullYear() + '-' + 
       (new Date(this.redirections[i].date).getMonth() + 1) + '-' + 
       (new Date(this.redirections[i].date).getDate() + 1), 
       1 
       ] 
      ); 
      } else { 
      // console.debug('dateIndex found: ' + dateIndex); 
      this.convertedRedirections[nameIndex].data[dateIndex][1]++; 
      } 
     } 
     } 
     for (var j = 0; j < this.convertedRedirections.length; j++) { 
     for (var k = 0; k < this.convertedRedirections[j].data.length; k++) { 
      this.convertedRedirections[j].data[k][0] = (new Date(this.convertedRedirections[j].data[k][0]).getTime() - 79200000); // Used to be 22PM, now 00:00 
     } 
     this.convertedRedirections[j].data.sort(); // Highcharts need the data sorted 
     } 
     for (var i = 0; i < this.convertedRedirections.length; i++) { 
     if (type === 'Redirection') { 
      this.seriesRedirection[i] = this.convertedRedirections[i]; 
     } else { 
      this.seriesPage[i] = this.convertedRedirections[i]; 
     } 
     } 
     views = (k + 1) * (j + 1); 
    }); 

    if (this.isAnimation && this._platform.isPortrait()) { 
     this._toastCtrl.create({ 
     message: this._translate.instant('MESSAGE.ANALYTICS'), 
     duration: 3000, 
     }) 
     .present(); 
    } 
    this.isAnimation = false; 
    } 

    setTotalViews(): void { 
    let redirectionViews: number = 0; 
    let pageViews: number = 0; 
    _.forEach(this.beacons, (beacon) => { 
     if (beacon.analytic && beacon.analytic.redirection) { 
     _.forEach(beacon.analytic.redirection, (redirection) => { 
      redirectionViews++; 
     }); 
     } 
     if (beacon.analytic && beacon.analytic.page) { 
     _.forEach(beacon.analytic.page,() => { 
      pageViews++; 
     }); 
     } 
    }); 
    this.totalViewsRedirection = redirectionViews; 
    this.totalViewsPage = pageViews; 
    } 

    /** 
    * Init Highstock Static API Options 
    */ 
    initHighstockOptions(): void { 
    Highstock.setOptions({ 
     lang: { 
     rangeSelectorFrom: this._translate.instant('PAGE.ANALYTICS.OPTIONS.FROM'), 
     rangeSelectorTo: this._translate.instant('PAGE.ANALYTICS.OPTIONS.TO'), 
     rangeSelectorZoom: this._translate.instant('PAGE.ANALYTICS.OPTIONS.ZOOM'), 
     shortMonths: this._translate.instant('PAGE.ANALYTICS.OPTIONS.SHORTMONTHS'), 
     weekdays: this._translate.instant('PAGE.ANALYTICS.OPTIONS.WEEKDAYS'), 
     printChart: this._translate.instant('PAGE.ANALYTICS.OPTIONS.PRINTCHART'), 
     downloadJPEG: this._translate.instant('PAGE.ANALYTICS.OPTIONS.DOWNLOADJPEG'), 
     downloadPDF: this._translate.instant('PAGE.ANALYTICS.OPTIONS.DOWNLOADPDF'), 
     downloadPNG: this._translate.instant('PAGE.ANALYTICS.OPTIONS.DOWNLOADPNG'), 
     downloadSVG: this._translate.instant('PAGE.ANALYTICS.OPTIONS.DOWNLOADSVG') 
     } 
    }); 
    } 

}