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

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

ただいまの
回答率

90.61%

  • JavaScript

    15921questions

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

javascriptのアニメーションに関する質問です。

解決済

回答 1

投稿

  • 評価
  • クリップ 2
  • VIEW 844

makoto_www

score 5

当方、javascript初心者です。

行いたい事は以下の通りです。
(1) blogの記事(本文内)においてページの表示と同時に動作するグラフ(1目盛づつ増えるアニメーション)の表示。

一定間隔で再表示。※各記事に1つずつ異なった値のグラフを表示。
(2) 上記のスクリプトの外部ファイル化と本文内に読み込む方法及び本文内でのグラフのパラメータの設定。

現状(検索して調べたサイトのサンプルを使用)

function CGraphValue(name, value) {
    this.name = name;                       
    this.value = value;                     
}

var graphValues = [];
graphValues.push(new CGraphValue("項目A", 5));
graphValues.push(new CGraphValue("項目B", 3));
graphValues.push(new CGraphValue("項目C", 4));
graphValues.push(new CGraphValue("項目D", 2));
graphValues.push(new CGraphValue("項目E", 1));

      function CGraphGenerateParam(pixel_per_value, graph_border_style, graph_border_width, graph_border_color, graph_background_color, 

graph_height) {
this.pixel_per_value = pixel_per_value;

this.graph_border_style = graph_border_style;

this.graph_border_width = graph_border_width;

this.graph_border_color = graph_border_color;

this.graph_background_color = graph_background_color;

this.graph_height = graph_height;

}

function CGraphAnimationParam(interval, add_value) {
    this.interval = interval;                               
    this.add_value = add_value;                             
}

function createAnimationGraph(id_graph, graphValues, valuesName, graphGenParam, graphAnimationParam) {

           var temp_graphValues = [];
    for ( var i = 0; i < graphValues.length; i++ ) {
        temp_graphValues.push(new CGraphValue(graphValues[i].name, 0));
    }

            function runAnimation() {
        createGraph(id_graph, temp_graphValues, valuesName, graphGenParam);

                    var updateFlag = false;             
        for ( var i = 0; i < graphValues.length; i++ ) {
            if ( graphValues[i].value > temp_graphValues[i].value ) {
                temp_graphValues[i].value += graphAnimationParam.add_value;
                if (temp_graphValues[i].value > graphValues[i].value) {             
                    temp_graphValues[i].value = graphValues[i].value;
                }

                updateFlag = true;
            }
        }

                    if ( updateFlag ) {
            setTimeout(runAnimation, graphAnimationParam.interval);
        }
    }
    runAnimation();
}

    function createGraph(id_graph, graphValues, valuesName, graphGenParam) {

           var obj_graph = document.getElementById(id_graph);
    var graph_html = "<table>";
    graph_html += "<tr><td>" + valuesName.name + "</td><td>" + valuesName.value + "</td></tr>";


    for (var i = 0; i < graphValues.length; i++) {

        var width = graphGenParam.pixel_per_value * graphValues[i].value;

        var graph_div = "";
        if (graphValues[i].value > 0) {
            graph_div = "<div style=\"border-style:" + graphGenParam.graph_border_style +
                ";border-width:" + graphGenParam.graph_border_width +
                ";border-color:" + graphGenParam.graph_border_color +
                ";background-color:" + graphGenParam.graph_background_color +
                ";width:" + width +
                "px;height:" + graphGenParam.graph_height + ";\"></div>";
        }

        graph_html += "<tr><td>" + graphValues[i].name + "</td><td><table><tr><td>" + graph_div + "</td><td>" + graphValues[i].value + 

"";
}

    graph_html += "</table>";
    obj_graph.innerHTML = graph_html;
}


   function startAnimation() {

            var max_value = 0;
    for (var i = 0; i < graphValues.length; i++) {
        if (graphValues[i].value > max_value) {
            max_value = graphValues[i].value;
        }
    }

            var max_width = 50;                           
    var pixel_per_value = 50;    


            createAnimationGraph(
        "graph-object", 
        graphValues, 
        new CGraphValue("Personal", "Result"),
        new CGraphGenerateParam(pixel_per_value, "solid", "0px", "#999999", "#fce525", "20px"), 
        new CGraphAnimationParam(1000/1, 1)    
    );

setTimeout("startAnimation()",20000);
}

・外部ファイル化していないため、各記事の本文内にjavascriptを記入。
・グラフの表示はできるが1つの記事のみ。(最後の記事のみ)

できるだけ簡単な表現でお教え頂ければ幸いです。
宜しくお願い致します。

イメージはこんな感じです。
http://simpletestsblog.blogspot.jp/

※画像にあるスクリプトをそのまま記事の本文に書き込んだものです。
test0及びtest1に全く同じ内容を書き込んであります。
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+2

jQueryを使うと簡単にできます。
<!doctype html>
<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <style>
    .progress {
        position:relative;
        display:block;
        margin-bottom:10px;
        width:60%;
        background:#ccc;
        height:30px;
        border-radius:10px;
    }

    .progress-bar {
        height:30px;
        width:0px;
        background: gold;
        border-radius:5px;
    }

    .progress-bar span{
        position:absolute;
        right:10px;
        top:0;
        line-height:30px;
    }
    </style>
    <script>
    $(function(){
        $('.progress').each(function(){
            $(this).find('.progress-bar').animate({width:$(this).data('percent')}, 1000);
        });
    });
    </script>
</head>
<body>
    <div class="progress" data-percent="50%">
        <div class="progress-bar"><span>5</span></div>
    </div>

    <div class="progress" data-percent="70%">
        <div class="progress-bar"><span>7</span></div>
    </div>

</body>
</html>

繰り返す場合は
    <script>
    $(function(){
        reapeatProgressBar();
    });

    var reapeatProgressBar = function() {
        $('.progress-bar').css('width',0);
        $('.progress').each(function(){
            $(this).find('.progress-bar').animate({width:$(this).data('percent')}, 1000);
        });
        setTimeout('reapeatProgressBar()',3000);
    }
    </script>
のように変更すると出来ると思います

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2014/10/13 08:42

    tmu様

    ご回答頂きありがとうございました。
    テストしたところ、複数の記事でグラフが表示できるようになりました。
    カスタマイズして完成させたいと思います。

    キャンセル

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

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

関連した質問

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

  • JavaScript

    15921questions

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