2014-01-15 4 views
0

저는 Chart.js를 사용하여 건물중인 앱에 대한 일부 도넛 차트를 만듭니다. 차트를 # 5a2a97과 같은 단일 색상을 기반으로하고 싶습니다.Jquery를 16 진 코드로 피드하고 동적으로 유사한 색상을 생성합니다.

그런 다음 HSB (포토샵 컬러 슬라이더에서이 용어를 사용함)를 사용하여 S 및 B 값을 0에서 100 % 사이의 임의 비율로 동적으로 변경하려고한다고 생각합니다.

원래의 16 진수를 기반으로 한 색상이되지만 동적 채도와 값이됩니다.

그런 다음 다시 chart.js에 대한 16 진 코드로 변환해야합니다.

나는이게 미친 소리가 난다는 것을 알고 있지만, 누구에게 아이디어가 있습니까?

는 그래서 같은 기본 색조 JQuery와 변수를 선언

Chart.js은 HSV 값을 받아

... I가 냈

+0

사용 HSL을 숫자에서 HSV 문자열을 생성하고 L 매개 변수를 다양합니다. 일반적인 16 진수 디코드 및 인코딩 기능이 필요하며 HSL <-> RGB 변환 기능도 필요합니다. Google은 두 가지 모두를 제시해야합니다. – Alnitak

+0

가능한 [Javascript에서 HSB/HSV 색상을 RGB로 정확하게 변환] (http://stackoverflow.com/questions/17242144/javascript-convert-hsb-hsv-color-to-rgb-accurately) – Blazemonger

답변

0

... : 266 그럼 그냥 사이의 난수를 생성 1-100 동적는 ...과 같이

//Home page Charts... 
$(document).ready(function() { 

    var primary_hue = 266; 

    var doughnutData = [ 
     { 
     value: 30, 
     color:"hsl("+primary_hue+","+(Math.round(Math.random() * 99) + 1)+"%,"+(Math.round(Math.random() * 99) + 1)+"%)", 
     label: "test", 

     }, 
     { 
     value : 50, 
     color:"hsl("+primary_hue+","+(Math.round(Math.random() * 99) + 1)+"%,"+(Math.round(Math.random() * 99) + 1)+"%)", 
     label: "test", 
     }, 
     { 
     value : 100, 
     color:"hsl("+primary_hue+","+(Math.round(Math.random() * 99) + 1)+"%,"+(Math.round(Math.random() * 99) + 1)+"%)", 
     label: "test", 
     }, 
     { 
     value : 40, 
     color:"hsl("+primary_hue+","+(Math.round(Math.random() * 99) + 1)+"%,"+(Math.round(Math.random() * 99) + 1)+"%)", 
     label: "test", 
     }, 
     { 
     value : 120, 
     color:"hsl("+primary_hue+","+(Math.round(Math.random() * 99) + 1)+"%,"+(Math.round(Math.random() * 99) + 1)+"%)", 
     label: "test", 
     }, 

    ]; 

    var myDoughnut = new Chart(document.getElementById("best-lure-canvas").getContext("2d")).Doughnut(doughnutData); 
});