highchartsで作成したグラフが表示されない

プログラム初心者です。
highchartsを使ってhtmlファイルを表示させたいのですが、うまくいきません。（黒色の画面表示になってしまいます）

こちらのブログを参考にして作成しました。
http://hutabah.hatenablog.jp/entry/2017/06/22/203000

以下、作成したファイルです

test.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="/home/yoshiaki/JS/highcharts.js"></script>
  <link rel="stylesheet" type="text/css" href="/home/yoshiaki/test/sample.css">
</head>

<body>
  <div id="container"></div>
  <script src="/home/yoshiaki/test/sample.js"></script>
</body>
</html>

sample.css

#container {
	min-width: 310px;
	max-width: 650px;
	height: 400px;
	margin: 0 auto;
}

sample.js

Highcharts.chart('container', {  //グラフ描画のテンプレート

    title: {  //グラフのタイトル
        text: 'Solar Employment Growth by Sector, 2010-2016'
    },

    subtitle: {  //グラフのサブタイトル
        text: 'Source: thesolarfoundation.com'
    },

    yAxis: {  //y軸の設定
        title: {  //y軸のタイトル
            text: 'Number of Employees'
        }
    },
    legend: {  //グラフの凡例
        layout: 'vertical',  //縦方向に並べる
        align: 'right',  //グラフの右に表示（左右中央）
        verticalAlign: 'middle'  //グラフの中央に表示（上下中央）
    },

    plotOptions: {  //点の設定
        series: {
            pointStart: 2010  //2010から書き始める
        }
    },

    series: [{  //グラフの中身（データの設定）
        name: 'Installation',  //各データの名前
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]  //各データ(数値)
    }, {
        name: 'Manufacturing',
        data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
    }, {
        name: 'Sales & Distribution',
        data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
    }, {
        name: 'Project Development',
        data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]  //nullに設定すると表示されません
    }, {
        name: 'Other',
        data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
    }]

});

kei344

2017/09/08 18:41

エラーは出ていませんか？デベロッパーツールで確認してみてください。http://eng-entrance.com/javascript-display-error

y_uuuu

2017/09/08 20:00

ご回答ありがとうございます。Chromium、firefoxのデベロッパーツールにて確認しましたが、エラーは表示されませんでした。

kei344

2017/09/08 20:28

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況を質問文に追記ください。

y_uuuu

2017/09/08 21:36

失礼しました。ただ今、解決済みにいたしました。

行動規範の内容に同意します

回答2件

以下のコードを実行しましたが、質問文にあるような現象が再現しませんでした。一度キャッシュの消去を行ったうえで以下のコードを試してみていただけませんか？

HTML
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        #container {
8            min-width: 310px;
9            max-width: 650px;
10            height: 400px;
11            margin: 0 auto;
12        }
13    </style>
14</head>
15<body>
16<div id="container"></div>
17<script src="https://code.highcharts.com/highcharts.js"></script>
18<script src="https://code.highcharts.com/modules/exporting.js"></script>
19<script>
20    Highcharts.chart("container", {  //グラフ描画のテンプレート
21        title: {  //グラフのタイトル
22            text: "Solar Employment Growth by Sector, 2010-2016"
23        },
24        subtitle: {  //グラフのサブタイトル
25            text: "Source: thesolarfoundation.com"
26        },
27        yAxis: {  //y軸の設定
28            title: {  //y軸のタイトル
29                text: "Number of Employees"
30            }
31        },
32        legend: {  //グラフの凡例
33            layout: "vertical",  //縦方向に並べる
34            align: "right",  //グラフの右に表示（左右中央）
35            verticalAlign: "middle"  //グラフの中央に表示（上下中央）
36        },
37        plotOptions: {  //点の設定
38            series: {
39                pointStart: 2010  //2010から書き始める
40            }
41        },
42        series: [{  //グラフの中身（データの設定）
43            name: "Installation",  //各データの名前
44            data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]  //各データ(数値)
45        }, {
46            name: "Manufacturing",
47            data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
48        }, {
49            name: "Sales & Distribution",
50            data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
51        }, {
52            name: "Project Development",
53            data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]  //nullに設定すると表示されません
54        }, {
55            name: "Other",
56            data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
57        }]
58    });
59</script>
60</body>
61</html>

投稿2017/09/07 14:04

s8_chu

総合スコア14731

y_uuuu

2017/09/07 17:58 編集

ご回答ありがとうございます。キャッシュの消去を行い、回答者様のコードを試しまして、無事起動しました。ただ、自分の書いたコードは依然、起動時の挙動は変わりませんでした。考えられる原因、こちらが提示すべき情報などありましたら、ご教授いただけたら幸いです。

s8_chu

2017/09/08 20:22

コメントをしたはずだったのですが、なぜかできていなかったので再度投稿します。以下の点を確かめてみてはいかがでしょうか？ - 読み込んでいるhighcharts.jsの内容は正しいか。 - highcharts.jsのパスは間違っていないか。 - highcharts.jsは読み込める場所に置いてあるか。

y_uuuu

2017/09/08 22:02 編集

ご回答ありがとうございます。上記3点のうち、下記2点については、【pwdでディレクトリの絶対パスを取得し、記述】【/home/yoshiaki/JS/highcharts.js】には特に特別な設定を行っていないので、問題はないものと思われます。そのため、- 読み込んでいるhighcharts.jsの内容は正しいか。という点が問題かと考えています。ダウンロードファイルHighcharts-5.0.14/code/js/より抜き出したhighcharts.jsファイルの内容が間違っている、もしくはなにか不具合の原因となるコードが含まれているなど、どちらにしても私の実力では内容の精査はできないので、今回は手法を変えることで対処することにいたしました。

行動規範の内容に同意します

自己解決

解決いたしました。
根本的な解決ではないのですが、highcharts.jsを読み込む際、

<script src="/home/yoshiaki/JS/highcharts.js"></script>

で読み込むことをやめ、

<script src="https://code.highcharts.com/highcharts.js"></script>

から読み込むようにしたところ、うまくいきました。

highcharts.jsは、公式ページよりHighcharts-5.0.14.zipをダウンロード、解凍し、highcharts.jsをJSフォルダ内に移動させ、
読み込んだのですが、今回のような状況になりました。
何がいけなかったのかはいまだ不明です。

投稿2017/09/08 20:13

y_uuuu

総合スコア16

y_uuuu

2017/09/08 20:15

迅速かつ的確なご回答いただき、解決までこぎつけることができました。ありがとうございました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

highchartsで作成したグラフが表示されない

関連した質問