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座標軸の座標値を表示するかどうか
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
}
},
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
}
},