Highcharts API-Jqueryグラフィックレポートの作成

3062 ワード

chart:
renderToグラフのページ表示コンテナ
defaultSeriesTypeチャートの表示タイプ(line,spline,scatter,splinearea bar,pie,area,column)
margin上下左右の隙間
イベントイベント
         click                 function(e) {}
         load                 function(e) {}
 
xAxis:yAxis:
属性:
gridLineColorメッシュの色
reversedがtrueを逆にするかfalse
gridLineWidthメッシュの太さ
startOnTick座標線から描画領域を開始するかどうか
endOnTick座標線から描画領域を終了するかどうか
tickmarkPlacement座標値と座標線マークの位置合わせon,between
tickPosition座標線タグのスタイルは内側に延びるか外側に延びるか(insidel,outside)
tickPixelIntervalは横座標の密度を決定する
tickColor座標線タグの色
tickWidth座標線タグの幅
LineColorベースラインカラー
LineWidthベースライン幅
max固定座標最大値
min固定座標最小値
plotlines線プロパティ
maxZoom
minorGridLineColor
minorGridLineWidth
/minorTickColor
title:                  
enabled:表示するかどうか
text:座標名
Labels座標軸値表示クラスデフォルト:defaultLabelOptions
formatterフォーマット関数
enabled座標軸の座標値を表示するかどうか
     rotation               

alignと座標線の水平相対位置
x水平オフセット量
y垂直オフセット量
     style                
fontフォントスタイルデフォルトdefaultFont
カラーカラー
    
Tooltipデータポイントのヒントボックス
enabledマウスが通過したときに可動状態がtrueを示すかどうかfalse
formatterフォーマットプロンプトボックスの内容スタイル
 
plotoOptions各種グラフを描くデータポイントの設定
デフォルト設定
ツールバーの
Areaクラス:
LineWidth線幅
FillColor areaの塗りつぶし色グループ
marker{}動的プロパティの設定
shadowシャドウtrue,false
states設定ステータス?
Lineクラス
DataLabels:データ表示クラス
enabledがポイントのデータtrue,falseを直接表示するかどうか
series
nameこの曲線名
data[]この曲線のデータ項目
addPoint([x,y],redraw,cover)追加描点,redraw再描画,cover左シフト
setData:function(data,redraw)Data配列を再設定し、redrawを再描画するか
remove:function(redraw)カーブを削除するには
redraw:function()カーブの再描画
marker :
enabled描画点を表示するかどうか
注意点:
 
1.ロゴマーク除去
credits: {
         enabled: false
      },
2.y軸に小数点以下は許されない
yAxis: {
                allowDecimals: false,
3.動的にx軸属性を取得する
var xAxisData = this.xAxis[0];
xAxisData.setCategories(['ss','dd','ff']);
 
4.データ属性の動的取得
var seriesUp = this.series[0];
var seriesDown = this.series[1];
var dataUp = date.dataUp;
var dataDown = date.dataDown;                                                                                     
 seriesUp.setData(dataUp, true);                                                                                               seriesDown.setData(dataDown, true);
 
5.図面に寸法表示を付ける
plotOptions: {
                line: {
                    dataLabels: {
                        enabled: true
                    },
                    enableMouseTracking: false
                }
            },