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

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

ただいまの
回答率

90.34%

  • JavaScript

    17496questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    9547questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    7101questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    6187questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • Highcharts

    38questions

    HighchartはHTML、SVG、VMLを使ったJavascriptの描写用ライブラリです。

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

解決済

回答 2

投稿

  • 評価
  • クリップ 1
  • VIEW 1,172

y_uuuu

score 8

プログラム初心者です。
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]
    }]

});
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/09/09 03:41

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

    キャンセル

  • y_uuuu

    2017/09/09 05:00

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

    キャンセル

  • kei344

    2017/09/09 05:28

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

    キャンセル

  • y_uuuu

    2017/09/09 06:36

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

    キャンセル

回答 2

+3

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>タイトル</title>
    <style type="text/css">
        #container {
            min-width: 310px;
            max-width: 650px;
            height: 400px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div id="container"></div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script>
    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]
        }]
    });
</script>
</body>
</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/08 02:57 編集

    ご回答ありがとうございます。
    キャッシュの消去を行い、回答者様のコードを試しまして、無事起動しました。

    ただ、自分の書いたコードは依然、起動時の挙動は変わりませんでした。

    考えられる原因、こちらが提示すべき情報などありましたら、ご教授いただけたら幸いです。

    キャンセル

  • 2017/09/09 05:22

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

    キャンセル

  • 2017/09/09 06:59 編集

    ご回答ありがとうございます。
    上記3点のうち、下記2点については、
    【pwdでディレクトリの絶対パスを取得し、記述】
    【/home/yoshiaki/JS/highcharts.js】には特に特別な設定を行っていないので、問題はないものと思われます。

    そのため、- 読み込んでいるhighcharts.jsの内容は正しいか。
    という点が問題かと考えています。
    ダウンロードファイルHighcharts-5.0.14/code/js/より抜き出したhighcharts.jsファイルの内容が間違っている、もしくはなにか不具合の原因となるコードが含まれているなど、どちらにしても私の実力では
    内容の精査はできないので、今回は手法を変えることで対処することにいたしました。

    キャンセル

check解決した方法

+1

解決いたしました。
根本的な解決ではないのですが、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/09 05:15

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

    キャンセル

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

  • ただいまの回答率 90.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    17496questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    9547questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    7101questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    6187questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • Highcharts

    38questions

    HighchartはHTML、SVG、VMLを使ったJavascriptの描写用ライブラリです。