Highchart没有在手机上显示

时间:2017-10-18 13:03:55

标签: javascript jquery mobile highcharts smartphone

我的图表在highcharts中有问题。

我的所有图表都在桌面上,Chrome / FF / IE / Safari中正确显示

但是当我在移动设备上时,他们中的任何一个都在展示。 我的日志中没有任何内容,所以我想知道如何修复它们,

图表有链接: http://www.chahinecapital.com/fonds/

您可以转到子标题Digital Star Europe,然后点击ACTIFS按钮作为示例。

还有我的loadEurope.js,我在其中初始化图表

   jQuery(document).ready(function($) {
    Highcharts.setOptions({
    lang: {
        months: [
            'Janvier', 'Février', 'Mars', 'Avril',
            'Mai', 'Juin', 'Juillet', 'Août',
            'Septembre', 'Octobre', 'Novembre', 'Décembre'
        ],
        weekdays: [
            'Dimanche', 'Lundi', 'Mardi', 'Mercredi',
            'Jeudi', 'Vendredi', 'Samedi'
        ],
        shortMonths: ['Jan', 'Fev', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil',
                      'Aout', 'Sept', 'Oct', 'Nov', 'Déc'
        ]
    }
});



$.get('http://www.chahinecapital.com/wp-content/themes/consulting-child/data/fonds/DigitalStarsEurope/volatilityFR.csv', function(data) {
    $('#EuropeVolatility').highcharts({

          yAxis: [{

                labels: {
                    format: '{value} %',

                },
                title: {
                    text: ' ',  
                }

            }],
        data: {
          csv: data,
        },
        series: [{
            color: '#682666',
          }, {
            color: '#ed8322',
          },{
            color: '#B7ADA5',
             }],
        xAxis: {
            tickPixelInterval: 50,
        },
        title:{
            text:null
        }
      });
    });




$("#EuropeAllocPaysBtn").click(function() {
$.get("http://www.chahinecapital.com/wp-content/themes/consulting-child/data/fonds/DigitalStarsEurope/countryFR.csv", function(csv) {
    $('#EuropeAllocPays').highcharts({
        chart: {
            type: 'pie',
            options3d: {
                enabled: true,
                alpha: 45,
                beta: 0
            }
        },
        plotOptions: {
             pie: {
                 allowPointSelect: true,
                 cursor: 'pointer',
                 depth: 35,
                 dataLabels: {
                     enabled: false
                 },
                 showInLegend: true
             }
         },
        data: {
            csv: csv
        },
        title:{
            text:null
        }
    });
});
});


$("#EuropeAllocSecteursBtn").click(function() {
    $.get("http://www.chahinecapital.com/wp-content/themes/consulting-child/data/fonds/DigitalStarsEurope/secteursFR.csv", function(csv) {
        $('#EuropeAllocSecteurs').highcharts({
             chart: {

                 type: 'pie',
                 options3d: {
                     enabled: true,
                     alpha: 45,
                     beta: 0
                 }
             },
             plotOptions: {
                 pie: {
                     allowPointSelect: true,
                     cursor: 'pointer',
                     depth: 35,
                     dataLabels: {
                         enabled: false
                        },
                     showInLegend: true
                    }
             },
            data: {
                csv: csv
            },
            title:{
                text:null
            }
        });
    });
    });


$("#EuropeActifsBtn").click(function() {
    $.get("http://www.chahinecapital.com/wp-content/themes/consulting-child/data/fonds/DigitalStarsEurope/assetsFR.csv", function(csv) {
        $('#EuropeActifs').highcharts({

             yAxis: [{ 
                    gridLineWidth: 0,
                    labels: {
                        format: '{value:,.0f}',


                    },
                    title: {
                        text: 'Nombre de parts',  
                    },
                    opposite: true
                },
                { 
                    labels: {
                        format: '{value}',
                        formatter: function(){
                            return this.value/100000 + "M";
                          }

                    },
                    title: {
                        text: 'Actifs en \u20AC ',

                    }


                }],

            data: {
                csv: csv
            },
            series: [{
                yAxis:1,
                color: '#682666',
              }, {
                yAxis:0,
                color: '#ed8322',
              }],
              title:{
                    text:null
                }
        });
    });
});



$("#EuropePerformancesPeriodeBtn").click(function() {
    $.get("http://www.chahinecapital.com/wp-content/themes/consulting-child/data/fonds/DigitalStarsEurope/performancesFR.csv", function(csv) {
        $('#EuropePerformancesPeriode').highcharts({
            yAxis: [{
                labels: {
                    format: '{value} %',

                },
                title: {
                    text: ' ',  
                }

            }],
            xAxis:{
                tickInterval:1,
            },
            chart: {
                type: 'column'
            },

            data: {
                csv: csv
            },
            series: [{
                color: '#682666',
              }, {
                color: '#ed8322',
              },{
                color: '#B7ADA5',
                 }],
                 title:{
                        text:null
                    }
        });
    });
 });
});

非常感谢你的帮助

约旦

1 个答案:

答案 0 :(得分:0)

我在另一个库中也遇到了同样的问题,因此我将在此处给出答案,也许会对某人有所帮助。

请明确说明,我的问题是使用 AM4CHARTS 库。

即使将chrome和firefox设置为移动模式,但在Mobile中也不显示,所有图表在Desktop中都可以正常工作。

由于某些原因,我的问题是浏览器缓存

在chrome中,我确实在过去的24小时内清理了缓存,然后图表又恢复了。

希望这可以帮助任何可能涉足此领域的人。