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