【highcharts】枠線の角を丸くする

今回もhighchartsの設定オプションの紹介です。
詳しくはHighcharts API Referenceを参考にしてください。

■borderRadius
highchartsでは、枠線の角を丸く表示させることができます。
 
borderRadius: 20
この記述をchart:{}のセクションに追加するだけです。
数値を大きくすればするほど丸みが増して表示されます。
実際は下のグラフのようになります。このグラフでは丸みの半径を50に設定しています。


Highcharts Example


ソース
 
$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container-pra1.5',
            borderColor: '#EBBA95',
      borderRadius: 50,
      borderWidth: 2,
            type: 'line'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: [{
            title: {
                text: 'Primary Axis'
            }
        }, {
            title: {
                text: 'Secondary Axis'
            },
            opposite: true
        }],
        legend: {
            layout: 'vertical',
            backgroundColor: '#FFFFFF',
            floating: true,
            align: 'left',
            x: 100,
            verticalAlign: 'top',
            y: 70
        },
        tooltip: {
            formatter: function() {
                return ''+ this.series.name +'
'+ this.x +': '+ this.y; } }, plotOptions: { series: { animation: { duration: 5000 } } }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }, { data: [129.9, 271.5, 306.4, 29.2, 544.0, 376.0, 435.6, 348.5, 216.4, 294.1, 35.6, 354.4], yAxis: 1 }] }); });
関連記事
  
このエントリーをはてなブックマークに追加

お気に入りサイト

■よく読まれている人気記事


コメントの投稿

非公開コメント

Index for HighCharts FreQuent
author imageAuthor:Lynx
データをグラフ化&推移を見守り中。
御連絡はこちらまでお願い致します。



最新記事