3

chart.js を使用してサイトにドーナツ グラフを表示しています。ページの別の場所から取得したコンテンツの配列を使用して、グラフの値を動的に設定できるようにしたいと考えています。Chart.js は、ドーナツ グラフの値をこのデータ構造に格納します。

var doughnutData = [
            {
                value: 10,
                color:"#F7464A"
            },
            {
                value : 10,
                color : "#46BFBD"
            },
            {
                value : 20,
                color : "#FDB45C"
            },
            {
                value : 50,
                color : "#949FB1"
            }

        ];

このデータ構造の値を Javascript で動的に設定するにはどうすればよいですか?

これを使用してランダムな色を生成する方法はすでに知っています（興味のある人向け）

'#'+Math.floor(Math.random()*16777215).toString(16)
4

2 に答える 2

2

あなたが抱えている問題は、実際のランダム性が実際にはランダムであると認識されていないということです。そのため、これらの色のそれぞれの間の色の類似性をチェックして、それらが表示されないようにする方法を見つけ出す必要があります.見分けがつかないこと。以前に3色でこれを行いました（以下）。代わりに、似ていないことが既にわかっている色のリストを作成し、そのリストからランダムに選択することをお勧めします。

私は自分の色を特定の範囲内に保とうとしました：

function getRandomColor() {
    var color = '';
    while (!color.match(/(#[c-e].)([e-f][a-f])([9-c].)/)) {
        color = '#' + Math.floor(Math.random() * (Math.pow(16,6))).toString(16);
    }
    return color;
}

function getColorSimilarityIndex(c1, c2) {
    var index = 0;
    for (i = 1; i <= 6; i++) {
        if (i == 1 || i == 5) {
            if (c1.substring(i, i + 1) === c2.substring(i, i + 1)) {
                index++;
            }
        }
    }
    return index;
}

var color1 = getRandomColor();
var color2 = getRandomColor();
var color3 = getRandomColor();

while (getColorSimilarityIndex(color2, color1) > 0) {
    color2 = getRandomColor();
}
while (getColorSimilarityIndex(color3, color1) > 0 || getColorSimilarityIndex(color3, color2) > 0) {
    color3 = getRandomColor();
}
于 2013-03-20T01:44:46.320 に答える