JSONによる高度なチャートのカスタマイズ
OutSystemsチャートはHighcharts APIを使用しているため、Highchartsの構成オプションを使用してチャートをカスタマイズしたり変更したりできます。これらの構成オプションをJSONスニペットとして定義し、チャートの[AdvancedFormat > HighchartsJSON]フィールドで使用することができます。
JSONスニペットおよび例
面グラフの塗りつぶしの色をカスタマイズする
面グラフの色を変更して縦のグラデーションを追加するには、以下のJSONスニペットを[AdvancedFormat > HighchartsJSON]に入力します。
"plotOptions: {
area: {
color:'<線の色>',
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, '<上部の色>'],
[1, '<下部の色>']
]
}
}
}"
<線の色>
は線の色、<上部の色>
は塗りつぶし領域の上部の色、<下部の色>
は塗りつぶし領域の下部の色です。
例
"plotOptions: {
area: {
color:'rgba(255,0,0,1)',
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, 'rgba(255,0,0,1)'],
[1, 'rgba(255,0,0,0)']
]
}}}"
2種類のチャートタイプを組み合わせる
2種類のデータ系列タイプを1つのチャートに組み合わせるには、以下の手順を実行します。
-
1つ目のデータ系列タイプのチャート(例: 列グラフ)を作成します。
-
以下のJSONスニペットを[AdvancedFormat > HighchartsJSON]に追加して、2つ目のY軸を定義し、2つ目のデータ系列を別のデータ系列に変更します。
"yAxis: [ { // options for primary y-axis or yAxis 0 }, { // options for secondary y-axis or yAxis 1 opposite: true } ] series: [ { // options for the first series }, { // options for the second series <type><type> yAxis: 1 } ]"
<タイプ>
はチャートのタイプ(例:spline
)です。
例
"yAxis: [
{},
{
opposite: true
}
],
series: [
{},
{
<type>'spline',
yAxis: 1
}
]"
HighchartsのデモからOutSystemsチャートにJSONを追加する
このトピックで示す簡単な例とJSONスニペット以外にも、Highchartsのデモのページでチャートのカスタマイズの例の一覧をご覧いただけます。
[VIEW OPTIONS >]を選択してこれらのHighchartsのデモのJSONにアクセスすることができます。さらに、いずれかの編集オプションを選択してデモを編集することもできます。
HighchartsのデモまたはJSFiddleのJSONを使用するには、以下の手順を実行する必要があります。
-
チャートの[AdvancedFormat > HighchartsJSON]にJSONを入力します。
-
[AdvancedFormat > HighchartsJSON]で、JSONの最初の行
Highcharts.chart('container', {
と最後の行});
を削除します。 -
JSONを引用符(
" "
)で囲みます