2017-08-16 5 views
1
<!DOCTYPE html> 
<html> 
<head> 
<title>Start With Highchart</title> 
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
</script> 
<script src="http://code.highcharts.com/highcharts.js"></script> 
<script type="text/javascript" src="/js/themes/gray.js"></script> 
</head> 
<body> 
<div id="container" style="width:100%; height:400px;"></div> 
<script type="text/javascript"> 
$(document).ready(function(){ 
var myChart = Highcharts.chart('container', { 
    chart: { 
     type: 'bar' 
    }, 
    title: { 
     text: 'Fruit Consumption' 
    }, 
    xAxis: { 
     categories: ['Apples', 'Bananas', 'Oranges'] 
    }, 
    yAxis: { 
     title: { 
      text: 'Fruit eaten' 
     } 
    }, 
    series: [{ 
     name: 'Jane', 
     data: [1, 0, 4] 
    }, { 
     name: 'John', 
     data: [5, 7, 3] 
    }] 
}); 
}); 
</script> 
</body> 
</html> 

In diesem Code ich einfach mit highchart zu starten versuchen. Dieser Code zeigt highchart an, aber kein Thema trifft darauf zu. wie man mit dieser Linie arbeitet. es ist nicht enthalten. In der Konsole "GET http://localhost/js/themes/gray.js" wird dieser Fehler angezeigt.ich bin versuchen Thema in meiner High-Chart zu schließen, aber auf der Webseite kein Thema anwenden wird, ist nur Diagramm sichtbar

+0

der Fehler 404. –

+0

Ihre js Dateipfad überprüfen, die Sie in Ihrem js Pfadverzeichnis enthalten und den richtigen Weg für den Zugang geben Sie Ihre erfordern js in HTML-Seite . – gaurav

+0

ist fertig, aber das Thema ist nicht anwendbar. –

Antwort

0

Scheck dieses ..

<!DOCTYPE html> 
<html> 
<head> 
<title>Start With Highchart</title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
</script> 
<script src="http://code.highcharts.com/highcharts.js"></script> 
</head> 
<body> 
<div id="container" style="width:100%; height:400px;"></div> 
<script type="text/javascript" src="/js/themes/gray.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
Highcharts.setOptions(Highcharts.theme); 
var myChart = Highcharts.chart('container', { 
chart: { 
    type: 'bar' 
}, 
title: { 
    text: 'Fruit Consumption' 
}, 
xAxis: { 
    categories: ['Apples', 'Bananas', 'Oranges'] 
}, 
yAxis: { 
    title: { 
     text: 'Fruit eaten' 
    } 
}, 
series: [{ 
    name: 'Jane', 
    data: [1, 0, 4] 
}, { 
    name: 'John', 
    data: [5, 7, 3] 
}] 
}); 
}); 
</script> 
</body> 
</html> 
0

Dieser vollständige Code funktioniert einwandfrei. Ich benutze die Cloudfare-CDN für die Theme-Datei, die bei Bedarf durch den Pfad zur lokalen Datei ersetzt werden kann.

<!DOCTYPE html> 
<html> 
<head> 
<title>Start With Highchart</title> 
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
</script> 
<script src="http://code.highcharts.com/highcharts.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/5.0.14/js/themes/gray.js"></script> 
</head> 
<body> 
<div id="container" style="width:100%; height:400px;"></div> 
<script type="text/javascript"> 
$(document).ready(function(){ 
var myChart = Highcharts.chart('container', { 
    chart: { 
     type: 'bar' 
    }, 
    title: { 
     text: 'Fruit Consumption' 
    }, 
    xAxis: { 
     categories: ['Apples', 'Bananas', 'Oranges'] 
    }, 
    yAxis: { 
     title: { 
      text: 'Fruit eaten' 
     } 
    }, 
    series: [{ 
     name: 'Jane', 
     data: [1, 0, 4] 
    }, { 
     name: 'John', 
     data: [5, 7, 3] 
    }] 
}); 
}); 
</script> 
</body> 
</html> 
+0

Pfad ist in Ordnung und ich legte Datei auf den richtigen Pfad, jetzt gibt es keinen Fehler, aber Thema ist immer noch nicht angezeigt. –

+0

Ich habe die Antwort basierend auf Ihrem Kommentar bearbeitet. Hör zu. –

+0

Wohin mit Highcharts.setOptions (Highcharts.theme); –

Verwandte Themen