【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
これで少しはかっこよくなったと思います

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

お気に入りサイト

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


コメントの投稿

非公開コメント

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



最新記事