2017-08-16 8 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> 

このコードでは、単にハイチャートから始めようとしています。このコードはハイチャートを表示しますが、テーマは適用されていません。この線で作業する方法。含まれていません。コンソール "GET http://localhost/js/themes/gray.js"にこのエラーが表示されます。私はハイチャートにテーマを含めるようにしていますが、ウェブページにテーマは適用されません。グラフのみが表示されます

+0

エラーが404 –

+0

があなたのjs・パス・ディレクトリーに含まあなたのjsファイルのパスをチェックして、あなたは、HTMLページ内のjsを必要とアクセスのための正しい道を提供しています。 – gaurav

+0

されていますがテーマは当てはまりません。 –

答えて

0

チェックこの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> 
</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

この完全なコードは完全に機能します。テーマファイルのクラウドフェアCDNを利用しました。必要に応じて、ローカルファイルへのパスで置き換えることができます。

<!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

パスは大丈夫ですが、私は正しいパスにファイルを置きますが、今はエラーは出ませんが、テーマは表示されません。 –

+0

あなたのコメントに基づいて回答を編集しました。見てみな。 –

+0

このHighcharts.setOptions(Highcharts.theme)をどこに置くか。 –

関連する問題