人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

ランダムに色を作成する方法を教えてください。
JavaScriptでグラフを描こうとしているのですが、色を自動生成する方法で良いアイデアないでしょうか?グラフの数が動的に変わるのですが、色をうまく調整したいと考えています。

#FFFFFF
#000000

このような文字列を作るのですが、ランダムに文字列を作るだけでは似たような色が出来てしまう可能性があります。グラフの個数(10~20個くらいを想定)に応じてうまいこと(被らない、見にくくない)配色したいのですが、何かアイデアがあればアドバイスいただけると嬉しいです。

●質問者: southgate_01
●カテゴリ:インターネット ウェブ制作
✍キーワード:#000000 JavaScript うまい アイデア アドバイス
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● Mook
●100ポイント ベストアンサー

いろいろなやり方があると思いますが、実装の一例です。

getColor() を呼び出す度に異なる色を計算するようにしています。

計算式の部分を工夫することで、仕様に合わせることができるかと思います。


cseed の部分を定数にすれば、毎回同じ色を順番に使用するようにでき

ますが、今回は乱数で初期設定するようにしています。


今回は回答していませんが、計算ではなく自分で色の配色を設定したいのであれば、

色のテーブルを配列で持って、それをローテーションで使用するというのも手軽な

実装方法だと思います。


<html>
<head>
<title>Color Test</title>
</head>
<body>
<script type="text/javascript">
<!--
// 色の初期設定
var cseed = Math.floor( Math.random()*100 );

// 色データ作成関数
function getColor(){
 var cnum = ( cseed++ * 0x552433 ) % 0x1000000; // 色の計算 R ≒ 256 * n / 3, G ≒ 256 * n / 7, B ≒ 256 * n / 5
 var hex = "000000" + cnum.toString(16);
 return "#" + hex.substr( hex.length - 6, 6 );
}

// サンプル関数
makeColorTable( 50 );
function makeColorTable( num ) {
var cseed = Math.floor( Math.random()*100 );
 document.write( "<table>\n" );
for ( var i=1 ; i<=num ; ) {
 document.write( " <tr>\n" );
for ( var j=0 ; j<10 ; j++, i++ ) {
var color = getColor(); // 色データの取得
 document.write( ' <td bgcolor="' + color + '" width="80">' + color + "</td>\n" );
 }
 document.write( " </tr>\n" );
}
document.write( "</table>\n" );
}
// -->
</script>
</body>
</html>
◎質問者からの返答

コメントありがとうございます、早速試してみます。

今日明日中に作るつもりですので、出来たら改めてコメントします。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ