Skip to main content

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

 

 

OutSystems

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. 1つ目のデータ系列タイプのチャート(例: 列グラフ)を作成します。

  2. 以下の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を使用するには、以下の手順を実行する必要があります。

  1. チャートの[AdvancedFormat > HighchartsJSON]にJSONを入力します。

  2. AdvancedFormat > HighchartsJSON]で、JSONの最初の行Highcharts.chart('container', {と最後の行});を削除します。

  3. JSONを引用符(" ")で囲みます

  • Was this article helpful?