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

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
    }
]"