【highcharts】 グラフの右下に表示される"highcharts.com"というクレジットを消す方法

highchartsを利用してグラフを作成すると、もれなく右下にhighcharts.comというクレジットが表示されます。無料で使わせてもらっている身としては、このクレジットは表示するべきだと思うのですが、デザイン上どうしてもはずしたいという時のためにこのクレジットを非表示にする設定オプションがあります。これは、公式のHighcharts API Referenceに載っている方法なので、クレジットを外したからといって公式から怒られる(#゚Д゚)ということはないのでご安心を!


では、さっそくその方法です。
方法は簡単で以下の記述をコードの適当な場所に加えるだけでOKです。
 
credits: {
            enabled: false
        }


では実際に確認してみましょう
通常はグラフ1のように右下にクレジットが表示されます。


グラフ1(クレジットありの通常のグラフ)

Highcharts Example


しかし、上の記述を加える事でグラフ2のように
"highcharts.com"のクレジットを非表示にすることができます。


グラフ2(クレジットが非表示のグラフ)

Highcharts Example


グラフ2のソース
 
$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container-pra1.14',
            type: 'line',
      plotBackgroundColor: '#FFFFFF',
            plotShadow: true
        },
        
        credits: {
            enabled: false
        }

        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: [{
            title: {
                text: 'Primary Axis'
            }
        }],
        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] }] }); });


簡単なので使ってみてください!!

  
このエントリーをはてなブックマークに追加

お気に入りサイト

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


【highcharts】 グラフ部分に影を付ける

今回はグラフをカッコ良く見せるためのオプションを紹介します
詳しくはHighcharts API Referenceを見てください。

■plotShadow

highchartsでは以下の記述をすることで容易にグラフ部分に影を付けることができます。

plotShadow: true 


では,実際にどんな感じになるのか見てみましょう
Highcharts Example

少しわかりずらいですけど、グラフが描かれている部分の枠線に薄い影が表示されていると思います。
この"plotShadow"は、以下に示したソースのようにplotBackgroundで色を指定しないと表示されない(plotShadow単体での使用は出来ない)ので注意が必要です(今回は背景色を白に設定しています。白以外でも影を表示させることは可能ですが、見えにくいのであまりお勧めできません)。

ソース
 
~~

$(function () { var chart = new Highcharts.Chart({ chart: { renderTo: 'container-pra1.12', type: 'line',       plotBackgroundColor: '#FFFFFF', plotShadow: true }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, ~~
  
このエントリーをはてなブックマークに追加

お気に入りサイト

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


【highcharts】 グラフの背景に画像を設定する

highchartsでは、グラフの背景に指定した画像を表示させることも可能です。
詳しくはHighcharts API Referenceを見てください。この他にも色々な方法が紹介されています。

早速のやり方の紹介です。といってもやり方は簡単です。
chart:{ }に以下の記述を追加するだけです。
 plotBackgroundImage: '表示させたい画像のURL'
今回はこちらの画像を背景に使います。
画像はどこでもいいのでアップロードしておいてください。
URL: http://blog-imgs-58.fc2.com/f/r/e/frequ2156/sunahama.jpg

sunahama.jpg

Highcharts Example


ソース
$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container-pra1.10',
             plotBackgroundImage: 'http://blog-imgs-58.fc2.com/f/r/e/frequ2156/sunahama.jpg',
            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 }] }); });


上のグラフだと凡例部分が目立つので、ここを修正します。
上のグラフは凡例の背景色を白(#FFFFF)で指定していたので、この記述を削除することで凡例部分の背景を透過にすることが出来ます。

Highcharts Example
これで少しはかっこよくなったと思います

  
このエントリーをはてなブックマークに追加

お気に入りサイト

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


【highcharts】 グラフ部分のみ背景色を変更する

以前、グラフ全体の背景色を変更する方法を紹介しましたが、今回はグラフ部分のみの背景色を変更する方法を紹介します。一度に紹介すればよかったのですが長くなりそうなので別個の記事にしました。

方法はグラフ全体の背景色を変更するのとほぼ同じで、以下の記述をchart:{ }に追加します。
 
plotBackgroundColor: '#XXXXXX'
(XXXXXXにはHTMLの色指定番号を入れます)
グラフ全体の時はBackgroudColorでしたが、グラフ部分のみではplotBackgroundColorとなります。

で、実際のグラフはこちらになります。 Highcharts Example
 

$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container-pra1.8',
            plotBackgroundColor: '#5A5555'
            type: 'line'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

~



背景色は単色だけでなく、少しずつ色を変えることも可能です。
plotBackgroundColorで色を指定する代わりに以下の記述を加えます。
 
plotBackgroundColor: {
                linearGradient: [0, 0, 500, 500],
                stops: [
                    [0, 'rgb(255, 255, 255)'],
                    [1, 'rgb(200, 200, 50)']
                ]
            }
この記述を加えたグラフが以下のようになります。
数値を変更させることで色を好きなように変更することが出来ます。

Highcharts Example


  
このエントリーをはてなブックマークに追加

お気に入りサイト

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


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



最新記事