2017-06-09 124 views
-2

我正在使用highcharts加載圖表,我的代碼在firefox中正常工作。但如果我加載它chrome意味着圖形不加載。它會拋出以下錯誤。無法在谷歌瀏覽器中加載高圖

Uncaught TypeError: Cannot read property '0' of undefined 
    at a.Chart.load (loadmap:3239) 
    at a.fireEvent (highcharts.js:30) 
    at a.Chart.onload (highcharts.js:272) 
    at a.Chart.firstRender (highcharts.js:271) 
    at a.Chart.init (highcharts.js:247) 
    at a.Chart.getArgs (highcharts.js:246) 
    at new a.Chart (highcharts.js:246) 
    at Object.a.chart (highcharts.js:246) 
    at _.Le.<anonymous> (loadmap:3230) 
    at Object._.B.trigger (js:99) 

我的編碼是在下面,

<!DOCTYPE html> 
<html> 
<head> 
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css" /> 
<link href="public/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> 
<link href="public/assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" /> 
<link href="public/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
<link href="public/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" /> 
<link href="public/frontend/style.css" rel="stylesheet" type="text/css" /> 
<link href="public/frontend/responsive.css" rel="stylesheet" type="text/css" /> 


<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=&sensor=false&libraries=places"></script> 


<script type="text/javascript" src="public/assets/js/geoxml3.js"></script> 
<script type="text/javascript" src="public/assets/js/ProjectedOverlay.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 

<script src="public/assets/global/plugins/jquery.min.js" type="text/javascript"></script> 
<script src="public/assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script> 



<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
<script src="https://code.highcharts.com/highcharts.js"></script> 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 

$(document).ready(function() { 

    var left = [[4,7],[9,2]]; 
    var right = [[2,2],[9,9]]; 

    </head> 
    <body> 


    <div id="container" style="min-width: 100px; max-width: 350px; height: 300px; margin: 0 auto"></div> 

    </body> 

    <script type="text/javascript"> 
    Highcharts.chart('container', { 

    title:{ 
     text:'' 
    }, 

    tooltip: { enabled: false }, 

    exporting: { enabled: false }, 

    credits: {enabled: false}, 

    plotOptions: { 
     series: { 
     pointStart: 1 
     } 
    }, 

    xAxis: { 
     max: 10, 
     min: 1, 
     tickInterval: 1 
    }, 

    yAxis: { 
     max: 11, 
     min: 0, 
     tickInterval: 1, 

     plotLines: [{ 
     color: 'black', 
     value: 5.5, 
     width: 2 
     }], 
    }, 

    series: [{ 
     showInLegend: false, 
     data: left 
     }, 
     { 
     showInLegend: false, 
     data: right 
     }, 
    ], 
    }); 
}); 

我通過laravel用這個。如果我使用這個代碼作爲html意味着它的工作。但在laravel它不起作用

+0

你不應該責怪瀏覽器,因爲[兼容性](https://www.highcharts.com/documentation/compatibility)已被證明。沒有圖表類型?例如'chart:{type:pie}'...也許? –

+0

你能顯示你的html嗎? –

+0

請檢查我的問題@ ramon – Nisanth

回答

2

你的代碼應該是這樣的。

<!DOCTYPE html> 
<html> 
<head> 
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css" /> 
    <link href="public/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> 
    <link href="public/assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" /> 
    <link href="public/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
    <link href="public/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" /> 
    <link href="public/frontend/style.css" rel="stylesheet" type="text/css" /> 
    <link href="public/frontend/responsive.css" rel="stylesheet" type="text/css" /> 


<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=&sensor=false&libraries=places"></script> 


<script type="text/javascript" src="public/assets/js/geoxml3.js"></script> 
<script type="text/javascript" src="public/assets/js/ProjectedOverlay.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 

<script src="public/assets/global/plugins/jquery.min.js" type="text/javascript"></script> 
<script src="public/assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script> 



<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
<script src="https://code.highcharts.com/highcharts.js"></script> 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 

</head> 
<body> 
    <div id="container" style="min-width: 100px; max-width: 350px; height: 300px; margin: 0 auto"></div> 
</body> 
<script type="text/javascript"> 
    $(document).ready(function() { 
    var left = [[4,7],[9,2]]; 
    var right = [[2,2],[9,9]]; 

    Highcharts.chart('container', { 

    title:{ 
     text:'' 
    }, 

    tooltip: { enabled: false }, 

    exporting: { enabled: false }, 

    credits: {enabled: false}, 

    plotOptions: { 
     series: { 
     pointStart: 1 
     } 
    }, 

    xAxis: { 
     max: 10, 
     min: 1, 
     tickInterval: 1 
    }, 

    yAxis: { 
     max: 11, 
     min: 0, 
     tickInterval: 1, 

     plotLines: [{ 
     color: 'black', 
     value: 5.5, 
     width: 2 
     }], 
    }, 

    series: [{ 
     showInLegend: false, 
     data: left 
     }, 
     { 
     showInLegend: false, 
     data: right 
     }, 
    ], 
    }); 
}); 
</script> 
+0

謝謝你的回答。我會檢查這個 – Nisanth

相關問題