2016-11-16 14 views
0

AnyChart를 사용하여 맞춤 색상을 생성하려면 어떻게해야합니까?AnyChart를 사용하여 맞춤 색상을 생성하려면 어떻게해야합니까?

이것은 내가 지금까지 가지고있는 것입니다. 저는 팔레트를 가리키는 라인을 주석 처리했습니다 - '팔레트에 영향을 미치려고합니다'.

anychart.onDocumentReady(function() { 

    //Trying to affect palette here 
    //led.palette = anychart.palettes.earth; 

    // create a stage 
    stage = anychart.graphics.create("diagramContainer"); 

    // create data 
    var data = [170, 210, 130, 310]; 

    // set the gauge type 
    led = anychart.gauges.led(); 

    // set data for the gauge 
    led.data(data); 

    // add the default pointer 
    led.addPointer(2); 

    // set the size and position 
    led.bounds("50%", 0, "25%", "100%"); 

    // sets background settings. 
    led.background({fill: "#FFFFFF 0.0"}); 

    // sets left bound. 
    led.left("28%"); 

    // sets height. 
    led.height("35%"); 

    // set the container id 
    led.container(stage); 

    // initiate the gauge drawing 
    led.draw(); 

});

답변

0

팔레트, 그것은 속성 여기에, 방법, AnyChart에서와 같이 거의 모든입니다 그것을 수행하는 방법입니다되지 않습니다 http://jsfiddle.net/0vhvnjqp/ 여기

// apply palette 
led.palette(anychart.palettes.earth); 
0

anychart

<!doctype html> 
<html> 
<head> 
    <script src="https://cdn.anychart.com/js/7.14.3/anychart-bundle.min.js"></script> 
    <link rel="stylesheet" href="https://cdn.anychart.com/css/7.14.3/anychart-ui.min.css" /> 
    <style> 
    html, body, #container { 
     width: 100%; 
     height: 100%; 
     margin: 0; 
     padding: 0; 
    } 
    </style> 
</head> 
<body> 
    <div id="container"></div> 
    <script type="text/javascript"> 
anychart.onDocumentReady(function() { 
    // create column chart 
    chart = anychart.column3d(); 
    chart.background({fill: "#000000 3.5"}); 
    //chart.Color("blue"); 
    // turn on chart animation 
    chart.animation(true); 

    // set chart title text settings 
    chart.title('Top 10 Cosmetic Products by Revenue'); 

    // create area series with passed data 
    chart.column([ 
    ['Rouge', '80'], 
    ['Foundation', '9'], 
    ['Mascara', '10'], 
    ['Lip gloss', '11'], 
    ['Pomade', '12'], 
    ['Nail polish', '14'], 
    ['Eyebrow pencil', '17'], 
    ['Eyeliner', '21'], 
    ['Eyeshadows', '24'] 
    ]).fill('red'); 

    chart.tooltip() 
    .position('top') 
    .anchor('bottom') 
    .offsetX(0) 
    .offsetY(5) 
    .format('{%Value}%'); 

    // set scale minimum 
    chart.yScale().minimum(0); 

    // set yAxis labels formatter 
    chart.yAxis().labels().format('{%Value}{groupsSeparator: }'); 

    chart.tooltip().positionMode('point'); 
    chart.interactivity().hoverMode('byX'); 

    chart.xAxis().title('Products by Revenue'); 
    chart.yAxis().title('Revenue in Dollars'); 

    // set container id for the chart 
    chart.container('container'); 
    var yLabels1 = chart.yAxis().labels(); 
    yLabels1.format(function(){ 
     return this.value + "%"; 
    }); 
    // initiate chart drawing 
    chart.draw(); 
}); 
    </script> 
</body> 
</html 
사용자 지정 색상 전체 코드입니다

>

관련 문제