ジャンゴペイント

オリジナルリンク： http://www.cnblogs.com/linbinqiang/p/4891593.html

{％が'base.html' ％延び} 
{％ブロックタイトル％}环境监控{％エンドブロックのタイトル％} 
{％ブロックextracssの％} 
    {％負荷staticfiles％} 
    < リンクREL = "スタイルシート" HREF = "{％静的'アプリ/ CSS / environment.css'％}」> 
    < スクリプトタイプ= "テキスト/ javascriptの" SRC = "http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js" > </ スクリプト> 
    < スクリプトタイプ= "テキスト/ javascriptの" SRC = "http://cdn.hcharts.cn/highcharts/highcharts.js" > </ スクリプト> 
    <スクリプトタイプ= "テキスト/ javascriptの" SRC= "http://cdn.hcharts.cn/highcharts/exporting.js" > </ スクリプト> 
{％エンドブロックextracss％} 
{％ブロックコンテンツ％} 
    < DIV クラスは= "行流体" > 
        < DIV クラス=」 COL-MD-12" > 
            < div要素のid = "my_container" スタイル= "分幅：310px;高さ：400ピクセル;マージン：0自動" > </ DIV > 
        </ DIV > 
    </ DIV > 
    < DIV クラス=」行流体」> 
        <div クラス= "COL-MD-12" > 
            < ボタンクラス= "BTN BTN-成功" ID = "ボタンをリフレッシュ" >修改</ ボタン> 
        </ DIV > 
    </ DIV > 
    < スクリプトタイプ= "テキスト/ javascriptの" > 
    $（関数（）{
         VARのデータ_y =  新しい配列（）; 
        データ_y = [ 10 、20 、30 、60 、70 、10 、20 、30 ];
         VARチャート;
         // 定義イメージ
        チャートは=  新しい新しいHighcharts.Chart（{ 
            チャート：{ 
                renderTo：' my_container ' 、
                タイプ：' スプライン' 
            }、
            タイトル：{ 
                テキスト：' 知恵クラウドプラットフォーム' 
            }、
            XAXIS：{ 
                カテゴリー：[ 1。 、2 、3 、4 、5 、6 、7 ] 
            }、
            YAXIS：{ 
                タイトル：{ 
                    テキスト：' 光の強度' 
                } 
            }、
            クレジット：{ 
                有効：falseに // 高ハイパーリンクチャートのロゴを外し
            }、
            シリーズ：[{ 
                名：' 時間' 、
                データ：データY、
            }] 
        }） ; 
        // リフレッシュピクチャ
        関数refreshPlot（データ）{ 
            chart.series [ 0 ] .setData（データ）; 
            chart.redraw（）; 
        };
         // 背景にデータを渡します
        機能のAjax（data_function）{ 
            $ .post（' {％のURL ' のAjax ' ％} ' { ' 薬' ：json_str}、data_function）; 
        } 

        // 背景データ形式を取得し、アレイ形式のJSONを返しますデータ
        関数get_json（）{ 
            データY = []; // 空の配列
            // データY = [0,10,40,0,20,60,80]; //配列を再割り当てする
            $ .getJSON（' / ajax_list / ' 、関数（RET）{
                 用（VARのI =ret.length -  1。; I > =  0 ; I - ）{ 
                    data_y.push（RET [I]）; 
                } 
                refreshPlot（データY）; 
            }）; 
        } 
        // Run関数
        $（ドキュメント）.ready（関数（） { 
            チャート; 
            // ボタンのクリック後のイベント
            $（' ＃の更新ボタン' ）.on（' クリック' 、機能（E）{ 
                ; get_jsonを（）
            }）; 
        }）; 
    }）; 
    </スクリプト> 
{％の末端ブロック含有量％}

 

ます。https：//www.cnblogs.com/linbinqiang/p/4891593.htmlで再現