[要約時間Summary Time]Highchartsの一般的な操作
2460 ワード
HIghchartsは強力なグラフ描画プラグインで、純粋なjsに基づいて描画されています.もちろん、グラフに対しても多くの操作があります.次に、私が仕事をしているときによくあるhighchartsの操作についてまとめます.完全ではありません.
1)Highchartsグラフィックスを描画するには:
文法は実は「jquery」で、$(「#divId」).highcharts(options);ここでoptionsは{}構造であり、典型的なjson構文である様々なオプションが含まれている.これにより、指定したdivにhighchartsグラフィックが埋め込まれます(divのidはdivIdです).
2)Highchartsの各種オブジェクトを取得する:
取得chart自体は、文法も同じ「jquery」,$(「#divId」)である.highcharts()
highchartsのseriesを取得して、とても簡単で、先にchartを取得して、更にchart.seriesでいいです(他のオプションも同じです.実はjsonのvalueの文法を取得しますか).
highchartsのseriesは配列[]であることに注意してください.あるserieに具体的にはchartなどのラベルを付ける必要があります.series[0].
3)series:series[n]を削除する.remove(false);//falseはchartを再描画しないことを示す.
4)あるseriesに追加します.これはよく動き図の動的リフレッシュに使われます.addPoint:
例えばseries[0].addPoint([x,y]|y,boolean redraw,boolean shift)構文では、3番目のboolean値Boolean shiftがtrueの場合、1つの点を追加すると同時に、1つの点がremoveによって削除され、視覚的には図形が動的に前方に移動することを示します.falseであれば、最初の点はまだそこにあり、視覚的には図形が「しわ」に押し出されている.2番目のパラメータBoolean redrawはもちろんtrueに設定されています~~~~
5)x軸のcategoryを設定する:
よく見られますが、ストライプ図、レーダー図、餅図などの図形によく使われています.これらの図のcategoryがバックグラウンドから動的に読み込まれる場合は、この構文で設定する必要があります.
まずxAxisを見つけなければなりません.xAxisも配列であることに注意してください.まず、var xAixs=chartを取得します.xAxis[0]そしてxAixs.setCategories(transTimeCategory, false);//falseはchartを再描画しないことを示し、最初のパラメータはバックグラウンドから送られてきた文字列の集合であることが多い.
6)Js関数はseriesを返します.
ここで、dataデータソースはtransCountListであり、バックグラウンドで返されるList
1)Highchartsグラフィックスを描画するには:
文法は実は「jquery」で、$(「#divId」).highcharts(options);ここでoptionsは{}構造であり、典型的なjson構文である様々なオプションが含まれている.これにより、指定したdivにhighchartsグラフィックが埋め込まれます(divのidはdivIdです).
2)Highchartsの各種オブジェクトを取得する:
取得chart自体は、文法も同じ「jquery」,$(「#divId」)である.highcharts()
highchartsのseriesを取得して、とても簡単で、先にchartを取得して、更にchart.seriesでいいです(他のオプションも同じです.実はjsonのvalueの文法を取得しますか).
highchartsのseriesは配列[]であることに注意してください.あるserieに具体的にはchartなどのラベルを付ける必要があります.series[0].
3)series:series[n]を削除する.remove(false);//falseはchartを再描画しないことを示す.
4)あるseriesに追加します.これはよく動き図の動的リフレッシュに使われます.addPoint:
例えばseries[0].addPoint([x,y]|y,boolean redraw,boolean shift)構文では、3番目のboolean値Boolean shiftがtrueの場合、1つの点を追加すると同時に、1つの点がremoveによって削除され、視覚的には図形が動的に前方に移動することを示します.falseであれば、最初の点はまだそこにあり、視覚的には図形が「しわ」に押し出されている.2番目のパラメータBoolean redrawはもちろんtrueに設定されています~~~~
5)x軸のcategoryを設定する:
よく見られますが、ストライプ図、レーダー図、餅図などの図形によく使われています.これらの図のcategoryがバックグラウンドから動的に読み込まれる場合は、この構文で設定する必要があります.
まずxAxisを見つけなければなりません.xAxisも配列であることに注意してください.まず、var xAixs=chartを取得します.xAxis[0]そしてxAixs.setCategories(transTimeCategory, false);//falseはchartを再描画しないことを示し、最初のパラメータはバックグラウンドから送られてきた文字列の集合であることが多い.
6)Js関数はseriesを返します.
var series = [{
name:' ',
data: transCountList,
marker: {
enabled: false
}
}];
return series;
ここで、dataデータソースはtransCountListであり、バックグラウンドで返されるList