2016-11-16 52 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 
與自定義顏色完整代碼

>